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

Question

我想将表格标题或表格标题内的元素旋转 270 度(使用 transform:rotate (270 top left) 或类似的)，并将列的宽度设为标题的高度(旋转前)，或固定为 1em , 两者都行。我需要表格的行为仍然像表格一样(即，设置后续行中单元格的宽度)。

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

Answer 1

我相信这实际上不可能按照描述的那样做(没有 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;