HTML表格设置max-width后旋转表头th单元格背景色失效如何解决

问题根源 #

直接对<th>元素应用旋转变换时，transform仅修改元素的视觉渲染效果，不会改变元素在文档流中的原始占位尺寸，因此会出现背景未跟随旋转、单元格占位过宽、背景色显示不全的问题。

解决方法 #

将表头文本嵌套在内联块级子元素中，仅旋转子元素，<th>本身负责控制单元格占位尺寸和背景基础样式，具体实现如下：

完整CSS代码 #

th {
  /* 控制单元格实际占位宽度，保证列窄 */
  width: 2em;
  max-width: 2em;
  position: relative;
  vertical-align: bottom;
  text-align: center;
  /* 背景色可以加在th上也可以加在内层span上 */
  background-color: yellow;
  padding: 0;
}
/* 表头行设置固定高度，给旋转后的文本留足够显示空间 */
tr:first-child {
  height: 120px;
}
th span {
  display: inline-block;
  white-space: nowrap;
  /* 调整旋转原点和位置，避免文本溢出 */
  transform-origin: center left;
  transform: rotate(-45deg) translate(-10px, -8px);
  /* 如果要背景跟随文本完全贴合，也可以把背景加在span上 */
  /* background-color: yellow; */
}
td {
  text-align: center;
}

完整HTML代码 #

<!DOCTYPE html>
<html>
<body>
<table cellpadding="5" cellspacing="0" border="1">
  <tr>
    <th><span>21st September</span></th>
    <th><span>22nd September</span></th>
    <th><span>23rd September</span></th>
  </tr>
  <tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
  </tr>
  <tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
  </tr>
  <tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
  </tr>
</table>
</body>
</html>

效果说明 #

• 单元格宽度固定为2em，不会被长文本撑宽
• 文本旋转-45度后完整显示，背景色跟随文本同步旋转无错位
• 无需额外添加占位div，通过表头行高度预留显示空间即可

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