Я пытался создать классическую таблицу HTML с заголовком вверху и слева.
Теперь я хочу повернуть текст в левом заголовке на -90 ° .
Css поддерживает только 90 ° с режимом записи : vertical-rl; .
А с transform: turn (-90deg); Witout position:absolut; он не будет динамически помещаться по мере увеличения таблицы.
Я нашел: Как я могу контролировать ширину ячейки заголовка таблицы, которая содержит повернутый текст?
Но каким-то образом left: необходимо отрегулировать в зависимости от длины заголовка.
-
Есть ли способ получить элемент <div> в левом заголовке
высота и ширина элемента <td> равны , не влияя на этот и вписываясь в него?
Текст также должен быть в одной строке, без переноса и с overflow:hidden;, что означает, что максимальная высота должна определяться таблицей, а не длиной текста внутри левого заголовка.
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>