CSS 表格自动加高，带有旋转文本

Question

所以我必须在我的网站上做一个表格。我使用了大量的行跨度和列跨度。在其中一个单元格中，我必须将文本旋转 90°。这是到目前为止的图表图片。表 I 无法弄清楚 CSS 中的代码以使单元格自动适应垂直文本的高度。谁能帮我？

Answer 1

我不确定有没有办法使用转换来做你想做的事情。您最好更改writing-mode属性。它对现代浏览器的全面浏览器提供了出色的浏览器支持。

写入模式 CSS 属性定义文本行是水平布局还是垂直布局，以及块的前进方向。

要使其适用于表格单元格，您需要将其更改为内联块。这里有一个简短的例子，希望能为你指明正确的方向(双关语绝对是有意的(。

td { 
border: 1px solid red;
padding: 15px;
}
.vertical {
writing-mode: vertical-lr;
display: inline-block;
white-space: nowrap;
}

<table>
<tr>
<td>horizontal text</td>
<td class="vertical">long vertical text</td>     
<td>horizontal text</td>    
</tr>
</table>

Answer 2

你可以试试：

$(function() {
var header_height = 0;
$('table th span').each(function() {
if ($(this).outerWidth() > header_height) header_height = $(this).outerWidth();
});
$('table th').height(header_height);
});

table, tr, td, th {
border: 1px solid #000;
position: relative;
padding: 10px;
}
th span {
transform-origin: 0 50%;
transform: rotate(-90deg); 
white-space: nowrap; 
display: block;
position: absolute;
bottom: 0;
left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th><span>Shorter Title</span></th>
<th><span>Much Much Longer Title</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>