能否仅用CSS实现表格td的rowspan效果，无需手动计算行数？

我正在用Userscript修改网站，需要对表格排序并合并同类型行的第一列。目前的实现方式是给同组非首行添加alternate类，再手动计算rowspan值来实现合并效果，现有代码如下：

现有实现代码 #

CSS #

table, td { border: 1px solid black; border-collapse: collapse; padding: 3px }
.alternate td.image { display: none }

HTML #

<table>
  <tr><td rowspan="3" class="image">Image 1</td><td>Info 1.1</td></tr>
  <tr class="alternate"><td class="image">Image 1</td><td>Info 1.2</td></tr>
  <tr class="alternate"><td class="image">Image 1</td><td>Info 1.3</td></tr>
  <tr><td rowspan="2" class="image">Image 2</td><td>Info 2.1</td></tr>
  <tr class="alternate"><td class="image">Image 2</td><td>Info 2.2</td></tr>
</table>

请问是否可以仅通过CSS实现该效果，让第一列自动覆盖下方所有alternate行，无需手动计算rowspan？

解决方案：纯CSS实现自动合并 #

可以通过绝对定位+表格布局调整实现，无需手动计算rowspan。核心是让同组的第一个第一列单元格覆盖下方alternate行的对应单元格，同时避免内容重叠。

修改后的代码 #

CSS

table {
  border: 1px solid black;
  border-collapse: collapse;
  position: relative; /* 作为绝对定位的参考容器 */
  table-layout: fixed; /* 固定表格布局，避免宽度混乱 */
}

td {
  border: 1px solid black;
  padding: 3px;
}

/* 第一列样式：绝对定位覆盖下方单元格 */
td.image {
  position: absolute;
  width: 80px; /* 固定第一列宽度 */
  height: 100%; /* 高度占满所在行组 */
  left: 0;
  top: 0;
  box-sizing: border-box;
}

/* 第二列留出第一列的宽度，避免内容被覆盖 */
td:not(.image) {
  padding-left: 90px; /* 比第一列宽度大10px，留间距 */
}

/* 隐藏alternate行的第一列 */
.alternate td.image {
  display: none;
}

/* 给非alternate行设置相对定位，让第一列的绝对定位基于该行 */
tr:not(.alternate) {
  position: relative;
}

HTML

<table>
  <tr><td class="image">Image 1</td><td>Info 1.1</td></tr>
  <tr class="alternate"><td class="image">Image 1</td><td>Info 1.2</td></tr>
  <tr class="alternate"><td class="image">Image 1</td><td>Info 1.3</td></tr>
  <tr><td class="image">Image 2</td><td>Info 2.1</td></tr>
  <tr class="alternate"><td class="image">Image 2</td><td>Info 2.2</td></tr>
</table>

关键逻辑说明 #

1. 表格设置position: relative和table-layout: fixed，确保绝对定位的参考容器稳定，且列宽度可控
2. 第一列单元格（.image）设置绝对定位，固定宽度并占满行组高度，覆盖下方alternate行的对应位置
3. 第二列设置padding-left，避开第一列的绝对定位区域，防止内容被遮挡
4. 仅隐藏alternate行的第一列，非首行的第一列作为定位基准，自然覆盖下方所有同组行

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