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;

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

1 个答案: