终于解决了table中使用了colspan后导致tr宽度不生效的问题

523 阅读1分钟

一般表格都会定义一个table-layout: fixed防止td被连串字符撑开

实际应用中发现,如果在定义了table-layout: fixed后,又使用了colspan=''合并单元格的话,在其余没有合并单元格的情况下tr会自动平分剩余的宽度

image.png

可以看到这里【性别】的宽度有点太宽了,实际上并不需要这么宽的宽度,在试了所有的修改宽度的方法都没用后,最后终于用这段代码解决了:

  • 把这段代码放在tr或者tbody之前。
<colgroup>
  <col width="12.5%">
  <col width="15%">
  <col width="7.5%">
  <col width="15%">
  <col width="12.5%">
  <col width="12.5%">
  <col width="12.5%">
</colgroup>

这时候把第三列的宽度修改为7.5%就成功生效了

image.png

完整代码: