HTML多级表头表格首行表头无法占满剩余宽度如何解决？

问题根因 #

你的问题由两个原因导致：

• 标签拼写错误：你写的<thread>是无效的表头标签，正确的表格表头标签为<thead>，错误标签可能导致浏览器渲染异常
• 首行表头单元格未指定跨列属性：表格第二行有3个表头单元格，说明表格总共有3列，首行只有1个默认仅占用第一列宽度，因此边框只覆盖第一列

修复方案 #

给首行的添加colspan="3"属性，指定该单元格横跨全部3列即可，同时修正标签拼写错误。

修正后的完整代码 #

CSS代码（原代码无需修改）

table {
  border-collapse: collapse;
  width: 100%;
}
th {
  border-bottom: 1px solid black;
}

修正后的HTML代码

<table>
  <thead>
    <tr>
      <th colspan="3">a title</th>
    </tr>
    <tr> 
      <th>sub content</th>
      <th>sub content 2</th>
      <th>sub content 3</th>
    </tr>
  </thead>
</table>

补充说明 #

如果你的表格列数是动态生成的，可以通过JS计算第二行的单元格数量，再动态给首行赋值colspan属性即可适配。

内容的提问来源于stack exchange，提问作者Robolisk