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

Question

我想将 table 标题或 table 标题内的元素旋转 270 度（使用 transform:rotate (270 top left) 或类似方法），并将列的宽度设为高度（在旋转之前）标题，或固定为 1em，都可以。我需要 table 仍然表现得像 table（即，设置后续行中单元格的宽度）。

我尝试了 float、table-layout、display、position、width 和 max-width 的所有组合能想到的。我要么以旋转文本的原始宽度列结束，要么在其包含 <th> 之外旋转标签。这让我发疯。

Answer 1

我相信这实际上不可能按照描述的那样做（没有 javascript），但我通过指定 min/max 宽度找到了一个足够好的解决方案，其中最小宽度短至我最短的字符串。所以，这是我所能得到的最接近的结果：

-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;

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

How to horizontally rotate table headings and keep col widths auto?

html

css

html-table

rotation

css-float