如何正确旋转表格单元格内的文本 [英] How can I properly rotate a text inside a table cell
问题描述
我试图创建一个经典的HTML表格，标题的顶部和左侧。
现在我想将左侧标题中的文本旋转 -90°。
I tried to create a classic HTML table with a title top and left. Now I want to rotate the text in the left title by -90°.
并使用转换：转（-90deg）; 淘汰赛 position：absolut; 随着表的变长，它将无法动态适应。
And with transform: turn (-90deg); Witout position:absolut; it will not fit dynamically as the table gets longer.
但是以某种方式
But somehow left: needs to be adjusted depending on the length of the title.
-
是否有办法获得< div>左侧标题元素与
中的< td> 元素的宽度一样高，高度与
Is there a way to get the <div> element in the left title
as high as wide and as wide as the height of the <td> element is without affecting this and fit in it?
文本也应该在一行上，没有换行并且 overflow：hidden; 表示最大高度应由表格定义，而不是由左侧标题内的文本长度定义。
The text should also be on one line, Without wrapping and with overflow:hidden; that means the max-height should be defined by the table not by the length of the text inside the left title.
table {
text-align: left;
border-collapse: collapse;
}
td,
th {
border: 1px solid lightgrey;
padding: 0px 3px;
}
td:not(:first-child) {
min-width: 140px;
}
.table_title_top {
text-align: center;
}
.table_title_left {
text-align: center;
width: 35px;
}
.table_title_left div {
display: flex;
position: absolute;
flex-wrap: nowrap;
text-align: center;
transform: rotate(-90deg);
height: 35px;
left: 0px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td colspan="100" class="table_title_top">
<div>Title Top Title Top</div>
</td>
</tr>
<tr class="calc-tr calc-tr-title">
<td rowspan="100" class="table_title_left">
<div>Title Left Title Left</div>
</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>
推荐答案
您可以使用 writing-mode：vertical-rl; 结合比例转换：
You can use writing-mode: vertical-rl; combined with a scale transformation:
table {
text-align: left;
border-collapse: collapse;
}
td,
th {
border: 1px solid lightgrey;
padding: 0px 3px;
}
td:not(:first-child) {
min-width: 140px;
}
.table_title_top {
text-align: center;
}
.table_title_left {
text-align: center;
width: 35px;
}
.table_title_left div {
writing-mode: vertical-rl;
white-space:nowrap;
transform:scale(-1);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td colspan="100" class="table_title_top">
<div>Title Top Title Top</div>
</td>
</tr>
<tr class="calc-tr calc-tr-title">
<td rowspan="100" class="table_title_left">
<div>Title Left Title Left</div>
</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>
这篇关于如何正确旋转表格单元格内的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
