Вертикальный текст в липкой шапке заезжает за вертикальный текст в таблице
Вертикальный текст в липкой шапке заезжает за вертикальный текст в таблице.
При удалении transform: rotate(180deg); всё работает как надо.
Как сделать так, чтобы ячейки R1 не перекрывали ячейку AAA, но и текст в них был в нужной мне ориентации (снизу вверх, как при удалении transform: rotate(180deg);)
table {
margin: 5% 3% 5% 3%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #000;
width: 100%;
text-align: center;
font-size: 16px;
}
.vertical-text {
writing-mode: vertical-lr;
transform: rotate(180deg);
background: #666;
}
.sticky {
position: sticky;
top: 0;
background: #fff;
}<div>
<table style="width=100%" border=1 cellpadding=0>
<tbody>
<thead class="sticky">
<tr>
<th class="vertical-text" width="1%" rowspan="3">AAA</th>
<th colspan="3">col1</th>
</tr>
<tr>
<th>col21</th>
<th colspan="2">col22</th>
</tr>
<tr>
<th>col31</th>
<th>col32</th>
<th>col33</th>
</tr>
</thead>
<tr>
<td class="vertical-text" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td class="vertical-text" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td class="vertical-text" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td class="vertical-text" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td class="vertical-text" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td class="vertical-text" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
</tbody>
</table>
</div>Ответы (1 шт):
Автор решения: Babaika
→ Ссылка
Перенёс весь блок <header> в конец и всё заработало.
Но не уверен что это единственно верный способ
<head>
<style>
table {
border-collapse: separate;
border-spacing: 0;
border: 1px solid #000;
text-align: center;
}
#vertical_text1 {
writing-mode: tb-rl;
transform: rotateZ(180deg);
background: #666;
}
.vertical_text {
writing-mode: tb-rl;
transform: rotateZ(180deg);
}
.sticky{
position: sticky;
top: 0;
background: #fff;
}
</style>
</head>
<body>
<div>
<table style="width=100%" border=1 cellpadding=0 >
<tbody>
<tr><td id="vertical_text1" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr><td id="vertical_text1" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr><td id="vertical_text1" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr><td id="vertical_text1" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr><td id="vertical_text1" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr><td id="vertical_text1" rowspan="3">R1</td>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<tr>
<td>asd</td>
<td>ds</td>
<td>a</td>
</tr>
<thead class="sticky">
<tr>
<th class="vertical_text" width="1%" rowspan="3">AAA</th>
<th colspan="3">col1</th>
</tr>
<tr>
<th>col21</th>
<th colspan="2">col22</th>
</tr>
<tr>
<th>col31</th>
<th>col32</th>
<th>col33</th>
</tr>
</thead>
</tbody>
</table>
</div>
</body>
</html>