如何用HTML/CSS让表头铺满表格宽度且无需添加空表头列？

你的表格表头仅2列，但数据行有3列，导致表头行的背景无法铺满整个表格宽度。不用添加空表头列，通过以下两种方案就能解决：

方案一：语义化结构+CSS调整（推荐） #

先调整HTML结构，把表头行放到<thead>标签中，再修改CSS将背景样式应用到<thead>上，这样表头背景会自动铺满表格宽度。

修改后的完整代码 #

HTML

<div id="thirdTable">
  <table>
    <thead>
      <tr>
        <th>First</th>
        <th>Second</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data goes here</td>
        <td>data goes here</td>
        <td>data goes here</td>
      </tr>
      <tr>
        <td>more data here</td>
        <td>more data here</td>
        <td>more data here</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

#thirdTable table {
  border: none;
  border-collapse: collapse;
  width: 100%; /* 让表格撑满父容器宽度 */
}
#thirdTable thead {
  background: linear-gradient(to right, #0033FF, #3399FF); /* 表头背景移到thead容器 */
}
#thirdTable tbody tr {
  background: linear-gradient(to right, #0033FF, #3399FF); /* 数据行背景保留 */
}
#thirdTable td {
  color: white;
  border: none;
  padding: 15px 8px;
}
#thirdTable th {
  color: #FFCC00;
  border: none;
  padding: 15px 8px; /* 和数据单元格保持一致的内边距 */
}

原理：<thead>是表格的表头容器，宽度默认与表格一致，给它设置背景后，不管内部有多少个<th>，背景都会铺满整个表格宽度。

方案二：不修改HTML结构，用CSS伪元素实现 #

如果不想调整HTML结构，可以通过伪元素给表头行添加铺满宽度的背景：

修改后的CSS #

#thirdTable table {
  border: none;
  border-collapse: collapse;
  width: 100%;
  position: relative;
}
#thirdTable tr:first-child {
  position: relative;
}
#thirdTable tr:first-child::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #0033FF, #3399FF);
  z-index: -1; /* 把伪元素放到文字下方 */
}
#thirdTable tr {
  background: linear-gradient(to right, #0033FF, #3399FF);
}
#thirdTable td {
  color: white;
  border: none;
  padding: 15px 8px;
}
#thirdTable th {
  color: #FFCC00;
  border: none;
  padding: 15px 8px;
  position: relative;
  z-index: 1; /* 确保表头文字显示在伪元素之上 */
}

原理：给表头行添加一个绝对定位的伪元素，撑满整个表格宽度作为背景层，同时让表头文字层级高于伪元素，保证正常显示。

内容的提问来源于stack exchange，提问作者sir-haver