HTML表格竖向文字两侧空白过多，如何调整宽度减少多余空白

问题原因 #

你当前使用CSS transform 做文字旋转仅属于视觉层面的变换，不会修改元素在文档流中的实际占位尺寸，承载竖向文字的单元格宽度仍会按照横向排布的"A few words"宽度计算，因此会出现大量多余空白。

解决方案 #

推荐使用CSS原生竖向书写模式实现，该方案会自动适配竖向文字的尺寸，无需手动固定宽度，自适应效果更好：

1. 修改CSS代码 #

table { 
  border: 0 solid #000; 
  border-collapse: collapse; 
} 
table td {
  border: 1px solid #000; 
  padding: 12px; 
} 
.rotate { 
  /* 原生竖向书写模式，默认文字方向和270度旋转效果一致 */
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  white-space: nowrap;
  text-align: center;
  /* 如果需要文字反向显示可以加下面这行 */
  /* transform: rotate(180deg); */
}

2. 清理冗余HTML代码 #

你原HTML中存在多处无对应开启标签的</span>冗余结束标签，以及多余的嵌套标签，可将竖向文字的单元格简化为：

<td rowspan="3" class="rotate"><b>A few words</b></td>

修改后单元格宽度会自动匹配竖向文字的高度，多余空白会自动消除。

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