如何修复<td>旋转后的宽度问题？实现容器尺寸适配文本

Hey there! Let’s fix that frustrating width glitch when rotating <td> (or <th>) elements, and get the container to automatically fit the text content like it should. Here’s a step-by-step solution:

问题分析 #

Your original code had two main issues:

1. The fixed width:10px forced a tiny width on the rotated element, making text overflow instead of expanding to fit.
2. CSS transform only changes the visual appearance of an element—it doesn’t alter its original layout space. So even after rotating, the browser still reserves the element’s pre-rotation width, causing misalignment.

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
.rotate {
  /* 统一现代浏览器旋转语法 */
  transform: rotate(90deg);
  /* 调整旋转原点到左下角，让文本旋转后对齐更自然 */
  transform-origin: bottom left;
  /* 移除固定宽度，让元素自适应文本内容 */
  width: auto;
  /* 用inline-block让容器收缩包裹文本 */
  display: inline-block;
  /* 可选：添加内边距让文本更美观 */
  padding: 5px;
  /* 可选：防止文本换行 */
  white-space: nowrap;
}

/* 旧版IE兼容（如果仍需支持） */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .rotate {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* rotation=1对应90度 */
    transform: none;
    display: block;
  }
}

/* 让表格自动适配内容宽度 */
#t01 {
  table-layout: auto;
  border-collapse: collapse;
  margin: 20px;
}

#t01 th, #t01 td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>
<title>Fixed Rotated Table Cells</title>
</head>
<body>
<table id="t01">
  <tr>
    <th>11-1</th>
    <th>
      <span class="rotate">旋转的表头文本</span>
    </th>
  </tr>
  <tr>
    <td>普通单元格</td>
    <td>
      <span class="rotate">更长的旋转内容，测试自动适配效果</span>
    </td>
  </tr>
</table>
</body>
</html>

关键修改说明 #

• 移除固定宽度：删掉width:10px，让元素能根据文本内容自动扩展宽度，避免文本溢出。
• 调整旋转原点：设置transform-origin: bottom left，让旋转后的文本从原位置的左下角开始排列，避免偏移混乱。
• 使用inline-block：让旋转元素收缩包裹住文本内容，这样父级<td>/<th>只会占用旋转文本所需的空间。
• 表格自动布局：table-layout: auto告诉浏览器根据单元格内容计算列宽，完美实现容器适配需求。
• IE兼容处理：针对旧版IE，用filter属性实现旋转（因为transform支持不完善），同时调整display属性避免布局冲突。

内容的提问来源于stack exchange，提问作者I am Bodya