Html 如何水平旋转表格标题并保持列宽自动？

我想将表标题或表标题内的元素旋转270度（使用

transform:rotate（270左上）

或类似方法），并使列的宽度为标题的高度（旋转前），或固定为1em，这两种方法都可以。我需要表仍然像表一样工作（即，设置后续行中单元格的宽度）

---

我尝试了我能想到的

浮动

，

表格布局

，

显示

，

位置

，

宽度

，和

最大宽度

的每种组合。我要么以旋转文本的原始宽度的列结束，要么在其包含的

之外旋转标签。这让我发疯。

我相信这实际上是不可能做到的（没有javascript），但我找到了一个足够好的解决方案，只需指定最小/最大宽度，其中最小宽度与我的最短字符串一样短。所以，这是我能得到的最接近的结果：

-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-ms-transform-origin: left top 0;
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
max-width: 72px;
min-width: 54px;
height: 36px;
display: block;
text-align: left;
vertical-align: middle;
line-height: 36px;
background: transparent;
margin-bottom: -24px;
overflow: hidden;

---

答案是这是不可能的。旋转90度的CSS元素保持其“宽度”作为其高度，反之亦然。你不能动态调整大小，因为纯CSS。因此，您要么预先计算最长元素的长度，要么只使用java脚本。