<分区>
<分区>
我试图旋转我的表格标题，使它们垂直排列，但周围的第 th 个元素最终小于 div。就好像 th 在旋转之前根据 div 调整自身大小。
如何根据旋转的 div 自动调整大小？
.columnHeader {
transform: rotate(-90deg);
}
th {
background-color: #f88;
}<table>
<tr>
<th>
<div class="columnHeader">One</div>
</th>
<th>
<div class="columnHeader">Two</div>
</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>编辑:这个问题由于重复而被关闭，但是重复不包含很好的答案，所以让我在这里发布一个非常干净的解决方案:
.columnHeader {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
th {
background-color: #f88;
}
td {
text-align: center;
}<table>
<tr>
<th>
<div class="columnHeader">One long heading</div>
</th>
<th>
<div class="columnHeader">Two long headings</div>
</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>请注意，“vertical-rl”模式实际上在旋转 180 度后变为从左到右。
编辑 2:感谢那些提供答案的人，但我没有赞成或接受他们中的大部分，因为在我写这篇文章时，他们没有解决如何调整大小的原始问题根据旋转文本的元素。他们中的一些人以像素或 em 为单位手动调整元素大小，但当然我一开始就可以这样做；任何元素的大小都可以手动调整。那不是我想要的；如果不清楚，我可以改写这篇文章的标题。
最佳答案
您可以使用 writing-mode
The
writing-modeCSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.
.columnHeader {
writing-mode:vertical-lr;
writing-mode:sideways-lr; /* FF or use transform and vertical-lr*/
}
th {
background-color: #f88;
width: 1.2em;/* which means min-width according to the table-layout algorythm.*/
}<table>
<tr>
<th>
<div class="columnHeader">One of any length</div>
</th>
<th>
<div class="columnHeader">Two</div>
</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>codepen 示例 https://codepen.io/gc-nomade/pen/EKQKBe
已删除但未删除，留在这里以供引用。
* 您可以使用 float 和一个伪元素以及一个垂直的 %padding绘制一个正方形以开始宽度。
The percentage is calculated with respect to the width of the generated box's containing block, even for '
padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1. Unlikemarginproperties, values forpaddingvalues cannot be negative. Likemarginproperties, percentage values for padding properties refer to the width of the generated box's containing block.
添加负的 margin-right 值实际上会将 .columHeader 的宽度减小为 null。
旋转.columnHeader
将 width 添加到 th (这将类似于 min-width )。
.columnHeader {
transform: rotate(-90deg);
}
th {
background-color: #f88;
width: 1.2em;
}
.columnHeader {
float: left;
margin-right: -20em;
}
.columnHeader:before {
content: '';
float: left;
padding-top: 105%;
}<table>
<tr>
<th>
<div class="columnHeader">One of any length</div>
</th>
<th>
<div class="columnHeader">Two</div>
</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>代码笔示例
关于html - 如何根据旋转的文本调整元素大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46622246/