使用-webkit-transform rotate时HTML表格的格式问题

核心问题分析 #

旋转元素时，浏览器会保留元素原有的宽高占位，导致列出现大量空白；同时默认的旋转原点和布局规则，无法让文本自然对齐到列顶部。以下是针对性的解决方法：

具体实现步骤 #

1. 消除冗余空白并保留 

通过绝对定位让旋转文本脱离文档流，避免占据原布局空间，同时用white-space: nowrap确保 生效，文本不换行。

2. 将旋转文本定位到列顶部

调整transform-origin为左上角，配合定位属性将旋转后的文本固定到单元格顶部位置。

修改后的代码示例 #

HTML结构

<table>
  <thead>
    <tr>
      <th></th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table-date"><span>1&nbsp;January&nbsp;2024</span></td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td class="table-date"><span>15&nbsp;January&nbsp;2024</span></td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

CSS样式

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

.table-date {
  position: relative;
  /* 固定单元格宽度，适配旋转后的文本高度 */
  width: 20px;
  /* 根据文本长度调整单元格高度 */
  height: 120px;
  padding: 0;
}

.table-date span {
  position: absolute;
  top: 0;
  left: 100%;
  /* 设置旋转原点为左上角，确保定位准确 */
  transform-origin: top left;
  transform: rotate(-90deg);
  /* 强制文本不换行，保留 作用 */
  white-space: nowrap;
  /* 可选：添加内边距优化视觉效果 */
  padding: 8px;
}

关键细节说明 #

• 用<span>包裹日期文本，单独控制旋转和定位，避免影响单元格整体布局。
• position: absolute让旋转文本脱离文档流，彻底消除原有的冗余空白。
• transform-origin: top left确保旋转时以文本左上角为基准，配合top:0和left:100%，让旋转后的文本刚好对齐到列顶部。

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