使用table时,根据tb的多少而自适应的撑开整个表格

在项目中,有个需求就是用户可以选择其中的几个字段进行显示隐藏,也就是说tr中的td个数是不确定的,但是整个table确是固定宽度的,这就需要不管有几个td都要自适应去占满整个表格。如下图
使用table时,根据tb的多少而自适应的撑开整个表格_第1张图片
其实table本身是支持这种自适应的,但是有时候表格稍微复杂了,然后自己也不懂其中的一些特性就容易特别作死的自己去根据显示隐藏的个数手动去算每个表格所占的colspan属性,算到薅头发。
例如下表格就是因为用户自定义选择几个字段不显示时而造成的页面乱了
使用table时,根据tb的多少而自适应的撑开整个表格_第2张图片

正常应该是下图
注意红框中的字段是用户可以选择显示或隐藏的字段,而红色的数字是每个td的colspan的值
使用table时,根据tb的多少而自适应的撑开整个表格_第3张图片

关键就在于同一个table的每行的tr中的所有td的个数可以不一样但是每行的tr中的所有td的colspan的值加起来要相等,上述表格乱码就是因为其中某个tr中的colspan总值不一致导致的,所以只要隐藏的时候只需要把每行的colspan计算一致就可以了
但是有时候因为字段的显示个数不一致而导致很难计算比如上述表格,你会发现一二行的td的colspan之和其实和下面其他行的td的colspan之和是不相等的,那么为什么还能正确显示呢。关键就在它们不是同一个table,一二行是一个table而其他行其实是另一个table,所以说当表格复杂时可以使用多个table进行组合,这样就不用自己根据用户选择的字段通过js去计算这么麻烦了,如果只用一个table的话,那么用户选择隐藏字段还要去计算一二行每个td的colsapn的值,这真的是太难了,刚踩过的坑。

你可能感兴趣的:(css,工作中的坑,html5,css3,前端)