技术解析

请教下表格 css 的写法
0
2021-06-03 17:44:25
idczone

不太会前端的东西,float 也试过了,感觉不好使。

问题:当某列的内容宽度小于列宽度时,按列宽度显示,怎么做?

例,如下面的 2 个表格里,以表格 1 的列宽度为基准,让表格 2 的 ab 列宽等于表格 1 的列宽(对齐),c 列自动拓展

A B C D
1 2 3 4
A B c
1 2 3

想这么做是因为有的表格只有 2 列,2 列的表格间距会非常大,看起来很辛苦。如果限定表格的整体大小,那好像也不太好大带宽服务器看,一坨大一坨小的


css grid layout

上 JS 吧 计算每列的宽度,给他设置上 width

grid 布局了解下

跨列 colspan="2"

https://codepen.io/zkl2333/pen/XWpYxRy

感谢

现在很少用 table 了,多数时候你看到的表格其实是 div 拼出来的。
为什么要这么做?因为 css 可以随便调整 div 的位置,无需改 html 代码就能变换布局。
你这个需求用 flex 布局就很容易实现,把表 2 的第三列设为 flex-grow:1 就行了

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服