HTML表格旋转表头：如何独立控制跨行列高度减少空白

API 探路者

2026-7-17

问题描述

我创建了一个混合水平与垂直表头的HTML表格，但无法独立控制中间跨列/跨行的行高，导致出现大量不必要的空白。请问如何独立控制两组行/列的高度？

原始代码如下：

th.rotate {
    writing-mode: vertical-lr;
    transform:rotate(-180deg)
}

<table class="table" border="1">
   <thead>
      <tr>
         <th class="rotate" rowspan="2">
            First Rotated Header</th>
         <th class="rotate" rowspan="2">
            Second Rotated Header</th>
         <th class="rotate" rowspan="2">
            Third Rotated Header</th>
         <th class="rotate" rowspan="2">
            Fourth Rotated Header</th>
         <th class="rotate" rowspan="2">
            Fifth Rotated Header</th>
         <th class="rotate" colspan="1">
            Sixth Rotated Header</th>
         <th class="rotate" colspan="1">
            Seventh Rotated Header</th>
         <th class="rotate" colspan="1">
            Eighth Rotated Header</th>
         <th class="rotate" colspan="1">
            Ninth Rotated Header</th>
         <th colspan="6">
            Large Colspan Group Header</th>
         <th class="thlarge" rowspan="2">
            Additional Comments
         </th>
      </tr>
      <tr>
         <th colspan="1">
            1</th>
         <th colspan="1">
            2</th>
         <th colspan="1">
            3</th>
         <th colspan="1">
            4</th>
         <th class="rotate" colspan="1">
            Topic 1 Rotated</th>
         <th class="rotate" colspan="1">Topic 2 Rotated</th>
         <th class="rotate" colspan="1">Topic 3 Rotated</th>
         <th class="rotate" colspan="1">Topic 4 Rotated</th>
         <th class="rotate" colspan="1">Topic 5 Rotated</th>
         <th class="rotate" colspan="1">Topic 6 Rotated</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>01</td>
         <td>02</td>
         <td>03</td>
         <td>04</td>
         <td>05</td>
         <td>06</td>
         <td>07</td>
         <td>08</td>
         <td>09</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
         <td>15</td>
         <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      </tr>
       <tr>
         <td>01</td>
         <td>02</td>
         <td>03</td>
         <td>04</td>
         <td>05</td>
         <td>06</td>
         <td>07</td>
         <td>08</td>
         <td>09</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
         <td>15</td>
         <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      </tr>
       <tr>
         <td>01</td>
         <td>02</td>
         <td>03</td>
         <td>04</td>
         <td>05</td>
         <td>06</td>
         <td>07</td>
         <td>08</td>
         <td>09</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
         <td>15</td>
         <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      </tr>
   </tbody>
</table>

解决方案

核心是通过固定表格布局+独立控制表头行高+优化旋转表头尺寸来解决空白问题，具体操作如下：

1. 固定表格布局

给表格添加固定布局，让列宽由CSS定义，避免内容自动拉伸行高：

.table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse; /* 合并边框减少多余间隙 */
}

2. 独立设置表头两行高度

直接给thead里的两行指定高度，同时让跨行表头单元格填满对应行高：

thead tr:first-child {
  height: 80px; /* 第一行表头高度，按需调整 */
}
thead tr:last-child {
  height: 40px; /* 第二行表头高度，按需调整 */
}

/* 让跨行表头单元格自适应所在行高度 */
th[rowspan="2"] {
  height: 100%;
}

3. 优化旋转表头的尺寸控制

旋转表头的文字容易拉伸单元格，通过固定宽度+flex布局限制尺寸：

th.rotate {
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
  white-space: nowrap;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* 垂直表头固定宽度，按需调整 */
}

4. 调整内容单元格换行

给内容单元格设置自动换行，避免拉伸列宽：

tbody td {
  word-wrap: break-word;
  padding: 4px;
  text-align: center;
}

/* 给评论列单独设置宽度 */
th.thlarge, tbody td:last-child {
  width: 200px;
  text-align: left;
}

修改后的完整代码

.table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

thead tr:first-child {
  height: 80px;
}

thead tr:last-child {
  height: 40px;
}

th[rowspan="2"] {
  height: 100%;
}

th.rotate {
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
  white-space: nowrap;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
}

tbody td {
  word-wrap: break-word;
  padding: 4px;
  text-align: center;
}

th.thlarge, tbody td:last-child {
  width: 200px;
  text-align: left;
}

<table class="table" border="1">
   <thead>
      <tr>
         <th class="rotate" rowspan="2">
            <span>First Rotated Header</span>
         </th>
         <th class="rotate" rowspan="2">
            <span>Second Rotated Header</span>
         </th>
         <th class="rotate" rowspan="2">
            <span>Third Rotated Header</span>
         </th>
         <th class="rotate" rowspan="2">
            <span>Fourth Rotated Header</span>
         </th>
         <th class="rotate" rowspan="2">
            <span>Fifth Rotated Header</span>
         </th>
         <th class="rotate" colspan="1">
            <span>Sixth Rotated Header</span>
         </th>
         <th class="rotate" colspan="1">
            <span>Seventh Rotated Header</span>
         </th>
         <th class="rotate" colspan="1">
            <span>Eighth Rotated Header</span>
         </th>
         <th class="rotate" colspan="1">
            <span>Ninth Rotated Header</span>
         </th>
         <th colspan="6">
            Large Colspan Group Header
         </th>
         <th class="thlarge" rowspan="2">
            Additional Comments
         </th>
      </tr>
      <tr>
         <th colspan="1">
            1
         </th>
         <th colspan="1">
            2
         </th>
         <th colspan="1">
            3
         </th>
         <th colspan="1">
            4
         </th>
         <th class="rotate" colspan="1">
            <span>Topic 1 Rotated</span>
         </th>
         <th class="rotate" colspan="1"><span>Topic 2 Rotated</span></th>
         <th class="rotate" colspan="1"><span>Topic 3 Rotated</span></th>
         <th class="rotate" colspan="1"><span>Topic 4 Rotated</span></th>
         <th class="rotate" colspan="1"><span>Topic 5 Rotated</span></th>
         <th class="rotate" colspan="1"><span>Topic 6 Rotated</span></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>01</td>
         <td>02</td>
         <td>03</td>
         <td>04</td>
         <td>05</td>
         <td>06</td>
         <td>07</td>
         <td>08</td>
         <td>09</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
         <td>15</td>
         <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      </tr>
       <tr>
         <td>01</td>
         <td>02</td>
         <td>03</td>
         <td>04</td>
         <td>05</td>
         <td>06</td>
         <td>07</td>
         <td>08</td>
         <td>09</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
         <td>15</td>
         <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      </tr>
       <tr>
         <td>01</td>
         <td>02</td>
         <td>03</td>
         <td>04</td>
         <td>05</td>
         <td>06</td>
         <td>07</td>
         <td>08</td>
         <td>09</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
         <td>15</td>
         <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      </tr>
   </tbody>
</table>

关键说明

table-layout: fixed是核心，让表格布局脱离内容影响，完全由CSS控制尺寸
直接给thead的两行设置height，跨行单元格设置height:100%就能独立控制两行高度
旋转表头通过固定宽度+flex布局，避免文字长度拉伸单元格尺寸
内容单元格设置换行，保证表格整体紧凑

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

HTML表格旋转表头：如何独立控制跨行列高度减少空白

解决方案 #

1. 固定表格布局 #

2. 独立设置表头两行高度 #

3. 优化旋转表头的尺寸控制 #

4. 调整内容单元格换行 #

修改后的完整代码 #

关键说明 #