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

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

正常应该是下图
注意红框中的字段是用户可以选择显示或隐藏的字段,而红色的数字是每个td的colspan的值
在这里插入图片描述

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值