如何实现表格行标题跨多行？合并表头布局遇阻求助

我要实现设计图里的表格布局，现在卡在两个点：

1. 无法正确添加ROW TITLE
2. 左侧单元格的“Merged header title will go here and centred vertically”文本没法像设计图那样垂直居中且自适应高度
   试过用rowSpan/colSpan，但直接导致表格布局错乱，求指出问题或解决方向。

设计图：
当前实现效果：

原代码片段 #

CSS #

.wrapper {
  font-family: sans-serif;
  text-align: center;
  max-width: 100%;
  overflow-x: scroll;
}

.table-title {
  border: 1px solid black;
  padding-left: 20px;
  background-color: #eceeef;
}

table {
  width: 100%;
}

table thead tr:first-child th:not(:first-child) {
  padding: 10px;
}

table thead tr th {
  padding: 7px;
}

table tbody tr:nth-child(even) {
  background-color: #cfd7e5;
}

table tbody tr:nth-child(even) td:first-child {
  background-color: #fff;
}

table tbody tr td {
  padding: 10px;
}

table th,
table td {
  border: 1px solid black;
}

HTML #

<div>
  <div class="table-title">
    <h2>Table title here</h2>
  </div>
  <table style="table-layout: auto;">
    <colgroup></colgroup>
    <thead>
      <tr>
        <th rowspan="4"></th>
        <th colspan="3">Merged header title will go here and centred 1</th>
        <th colspan="3">Merged header title will go here and centred 2</th>
      </tr>
      <tr>
        <th>COLUMN TITLE 1</th>
        <th>COLUMN TITLE 2</th>
        <th>COLUMN TITLE 3</th>
        <th>COLUMN TITLE 4</th>
        <th>COLUMN TITLE 5</th>
        <th>COLUMN TITLE 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Merged header title will go here and centred vertically</td>
        <td>1st January 2020</td>
        <td>1st January 2020</td>
        <td>1st January 2020</td>
        <td>1st January 2020</td>
        <td>1st January 2020</td>
        <td>1st January 2020</td>
      </tr>
      <tr>
        <td>Merged header title will go here and centred vertically</td>
        <td>8th January 2020</td>
        <td>8th January 2020</td>
        <td>8th January 2020</td>
        <td>8th January 2020</td>
        <td>8th January 2020</td>
        <td>8th January 2020</td>
      </tr>
      <tr>
        <td>Merged header title will go here and centred vertically</td>
        <td>12th January 2020</td>
        <td>12th January 2020</td>
        <td>12th January 2020</td>
        <td>12th January 2020</td>
        <td>12th January 2020</td>
        <td>12th January 2020</td>
      </tr>
      <tr>
        <td>Merged header title will go here and centred vertically</td>
        <td>21st January 2020</td>
        <td>21st January 2020</td>
        <td>21st January 2020</td>
        <td>21st January 2020</td>
        <td>21st January 2020</td>
        <td>21st January 2020</td>
      </tr>
    </tbody>
  </table>
</div>

1. 布局错乱核心原因 #

你在thead里给第一个th设置了rowspan="4"，但thead实际只有2行tr，rowspan数值和实际跨行数量不匹配，直接破坏了表格行列结构，导致tbody第一列和表头无法对齐。

2. 正确实现方案 #

要实现左侧单元格跨4行并垂直居中，需在tbody里合并对应单元格，同时通过CSS实现文本垂直居中与高度自适应：

修改后的完整代码 #

CSS #

.wrapper {
  font-family: sans-serif;
  text-align: center;
  max-width: 100%;
  overflow-x: scroll;
}

.table-title {
  border: 1px solid black;
  padding-left: 20px;
  background-color: #eceeef;
}

table {
  width: 100%;
  border-collapse: collapse; /* 合并边框，避免重复线条 */
}

table thead tr:first-child th:not(:first-child) {
  padding: 10px;
}

table thead tr th {
  padding: 7px;
  background-color: #eceeef; /* 表头添加背景色，匹配设计图 */
}

/* 左侧跨行单元格样式：垂直居中+自适应高度 */
table tbody tr:first-child td:first-child {
  vertical-align: middle;
  background-color: #fff;
  padding: 10px;
}

table tbody tr:nth-child(even) td:not(:first-child) {
  background-color: #cfd7e5; /* 修正偶数行背景色范围，不覆盖左侧跨行单元格 */
}

table tbody tr td {
  padding: 10px;
  border: 1px solid black;
}

table th {
  border: 1px solid black;
}

HTML #

<div class="wrapper">
  <div class="table-title">
    <h2>Table title here</h2>
  </div>
  <table>
    <thead>
      <tr>
        <th>ROW TITLE</th> <!-- 添加ROW TITLE表头 -->
        <th colspan="3">Merged header title will go here and centred 1</th>
        <th colspan="3">Merged header title will go here and centred 2</th>
      </tr>
      <tr>
        <th></th> <!-- 对应ROW TITLE的第二行空表头，保证结构完整 -->
        <th>COLUMN TITLE 1</th>
        <th>COLUMN TITLE 2</th>
        <th>COLUMN TITLE 3</th>
        <th>COLUMN TITLE 4</th>
        <th>COLUMN TITLE 5</th>
        <th>COLUMN TITLE 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- 合并4行，实现左侧单元格跨多行 -->
        <td rowspan="4">Merged header title will go here and centred vertically</td>
        <td>1st January 2020</td>
        <td>1st January 2020</td>
        <td>1st January 2020</td>
        <td>1st January 2020</td>
        <td>1st January 2020</td>
        <td>1st January 2020</td>
      </tr>
      <tr>
        <td>8th January 2020</td>
        <td>8th January 2020</td>
        <td>8th January 2020</td>
        <td>8th January 2020</td>
        <td>8th January 2020</td>
        <td>8th January 2020</td>
      </tr>
      <tr>
        <td>12th January 2020</td>
        <td>12th January 2020</td>
        <td>12th January 2020</td>
        <td>12th January 2020</td>
        <td>12th January 2020</td>
        <td>12th January 2020</td>
      </tr>
      <tr>
        <td>21st January 2020</td>
        <td>21st January 2020</td>
        <td>21st January 2020</td>
        <td>21st January 2020</td>
        <td>21st January 2020</td>
        <td>21st January 2020</td>
      </tr>
    </tbody>
  </table>
</div>

关键修改点 #

• 移除thead中错误的rowspan="4"，改为在tbody第一个单元格设置rowspan="4"，匹配实际要合并的4行数据
• 添加ROW TITLE表头，thead第二行对应位置留空单元格，保证表头结构完整
• 用vertical-align: middle实现左侧跨行单元格文本垂直居中
• 修正偶数行背景色选择器，避免覆盖左侧跨行单元格的白色背景
• 添加border-collapse: collapse让表格边框更整洁，匹配设计图

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