如何解决HTML表格thead高度设置无效及内容旋转后空隙问题

表格表头的<th>设置了固定宽度1.5em，内部名称通过writing-mode和transform旋转为水平显示后，名称与复选框之间出现了无法通过设置thead height:60px消除的空白间隙——原因是旋转的<span>仍保留了垂直布局时的占位空间，导致表头高度被撑开，同时元素间产生多余间隙。

原始代码 #

HTML #

<thead style="height: 60px;">
  <tr class="position-relative">
    <th scope="col" style="width: 1.5em;"></th>
    <th scope="col" style="width: 2em;"></th>
    <th scope="col" style="width: 6em;"></th>
    <th scope="col"></th>
    <th scope="col" style="width: 1.5em;">
      <span class="tableNameSpan"> FirstName LastName 1 </span>
      <input type="checkbox" value="">
    </th>
    <th scope="col" style="width: 1.5em;">
      <span class="tableNameSpan"> FirstName LastName 2 </span>
      <input type="checkbox" value="">
    </th>
  </tr>
</thead>
<tbody>
</tbody>

CSS #

.tableNameSpan {
  position: relative;
  right: 15px;
  writing-mode: vertical-rl;
  transform: rotate(-90deg);
  transform-origin: bottom right;
  margin-top: -400%;
}

解决方案 #

核心思路是让旋转的名称<span>脱离文档流，不再占用垂直布局的占位空间，同时调整定位和旋转参数，让名称紧贴复选框：

修改后的HTML #

<thead style="height: 60px;">
  <tr class="position-relative">
    <th scope="col" style="width: 1.5em;"></th>
    <th scope="col" style="width: 2em;"></th>
    <th scope="col" style="width: 6em;"></th>
    <th scope="col"></th>
    <th scope="col" style="width: 1.5em; position: relative;">
      <span class="tableNameSpan">FirstName LastName 1</span>
      <input type="checkbox" value="">
    </th>
    <th scope="col" style="width: 1.5em; position: relative;">
      <span class="tableNameSpan">FirstName LastName 2</span>
      <input type="checkbox" value="">
    </th>
  </tr>
</thead>
<tbody>
</tbody>

修改后的CSS #

.tableNameSpan {
  position: absolute;
  bottom: 100%;
  right: 0;
  writing-mode: vertical-rl;
  transform: rotate(-90deg);
  transform-origin: bottom right;
  white-space: nowrap;
  margin-bottom: 5px;
}

关键调整说明 #

• position: absolute让<span>脱离文档流，彻底消除垂直占位带来的空白间隙
• bottom: 100%将名称定位到复选框正上方，结合right:0确保元素对齐
• white-space: nowrap避免名称因宽度限制换行
• 此时thead style="height:60px"可以正常生效，因为表头高度不再被内部元素的占位撑开

内容的提问来源于stack exchange，提问作者Sergey S.