能否仅用CSS将表格首列<td>设置为整列表头样式？

需求背景 #

无法修改现有HTML结构，也不能使用JavaScript，仅通过CSS实现两个目标：

1. 隐藏<thead>中内容为"Hide this"的第一个<th>
2. 将<tbody>每行的第一个<td>设置为跨列的表头外观，效果类似整行合并作为该行表头

现有HTML结构 #

<table>
 <thead>
  <tr>
   <th>Hide this</th>
   <th>text</th>
   <th>value</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>term a</td>
   <td>Value of a</td>
   <td>123</td>
  </tr>
  <tr>
   <td>term b</td>
   <td>Value of b</td>
   <td>345</td>
  </tr>
 </tbody>
</table>

预期效果 #

每行的term a、term b占据整行宽度，呈现表头样式（如背景色、加粗）；该行的后两个单元格并排显示，对应原表格的"text"和"value"列内容。

纯CSS实现方案 #

完全可以实现，以下是兼容性较好的代码：

/* 隐藏thead中多余的第一个th */
thead th:first-child {
  display: none;
}

/* 将tbody每行改为grid布局，让第一个td自动占满整行 */
tbody tr {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 10px; /* 可选：增加行间距，区分表头与内容 */
}

/* 给第一个td设置表头视觉样式 */
tbody tr td:first-child {
  background-color: #f0f0f0;
  font-weight: bold;
  padding: 8px;
}

/* 让后两个td并排，还原原表格的两列布局 */
tbody tr td:nth-child(2),
tbody tr td:nth-child(3) {
  display: inline-block;
  width: 50%;
  padding: 8px;
  box-sizing: border-box;
}

/* 可选：优化表格整体样式 */
table {
  width: 100%;
  border-collapse: collapse;
}

实现原理 #

1. 先隐藏<thead>中不需要的第一个<th>
2. 将<tbody>的每行改为grid布局，设置单列后，第一个<td>自然占满整行，模拟出跨列（colspan）的效果
3. 调整后两个<td>的显示方式，各占50%宽度并排，还原原表格的内容列结构
4. 通过背景色、字体加粗等样式，将第一个<td>设置为表头的视觉效果

如果需要兼容IE等老旧浏览器，可以改用table-layout: fixed配合visibility的方案，但上述grid方案在现代浏览器中更简洁高效。

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