есть вопрос.
У меня есть таблица с главным хедером - thead с синим background, и c промежуточными хедерами - tr с голубым background. Я реализовал position: sticky для них. В результате хедеры прилипли, но есть проблема. Когда первый промежуточный хедер (№1 - Google Pixel 4) наталкивается на второй промежуточный (№2 - Samsung Galaxy S20), №2 начинает наезжать на №1.
Мне нужно чтобы №2 выталкивал №1, без наложения друг на друга. Как это реализовать?
Html код (немного урезал, но общая структура такая):
<table class="table-default">
<thead>
<th>User-Agent</th>
<th>Host</th>
<th>Rx[Mb]</th>
<th>Tx[Mb]</th>
<th>Upload[Mbps]</th>
<th>Download[Mbps]</th>
<th>Time[min:sec]</th>
</thead>
<tbody>
<tr>
<th>Google Pixel 4</th>
<th>ip: 198.51.100.80</th>
<th>Rx: 12Mb</th>
<th>Tx: 12Mb</th>
<th>Up: 2Mbps</th>
<th>Dn: 0Mbps</th>
<th>Time: 22min</th>
</tr>
<tr>
<td>curl/7.68.0</td>
<td>www.google.com:443</td>
<td>0.200</td>
<td>0.200</td>
<td>N/A</td>
<td>N/A</td>
<td>00:02</td>
</tr>
<tr>
<td>Mozilla/5.0</td>
<td>www.google.com:443</td>
<td>0.200</td>
<td>0.200</td>
<td>N/A</td>
<td>N/A</td>
<td>00:02</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Samsung Galaxy S20</th>
<th>ip: 193.48.100.80</th>
<th>Rx: 15Mb</th>
<th>Tx: 15Mb</th>
<th>Up: 2Mbps</th>
<th>Dn: 0Mbps</th>
<th>Time: 19min</th>
</tr>
<tr>
<td>curl/7.68.0</td>
<td>www.google.com:443</td>
<td>0.200</td>
<td>0.200</td>
<td>N/A</td>
<td>N/A</td>
<td>00:02</td>
</tr>
<tr>
<td>Mozilla/5.0</td>
<td>www.google.com:443</td>
<td>0.200</td>
<td>0.200</td>
<td>N/A</td>
<td>N/A</td>
<td>00:02</td>
</tr>
</tbody>
<!---
Еще 2 куска таблицы
--->
</table>
Css код:
body {
min-height: 2000px;
}
.table-default {
border-collapse: collapse;
}
.table-default th,
.table-default td {
padding: 8px;
}
.table-default thead th {
position: sticky;
top: 0;
z-index: 10;
color: #ffffff;
background-color: #0078d4;
}
.table-default tbody tr:nth-child(1) th {
position: sticky;
top: 34px;
z-index: 5;
color: #ffffff;
background-color: #3A9DEA;
}
.table-default tbody tr:nth-child(odd) {
background-color: #f3f2f1;
}
.table-default tbody tr:nth-child(even) {
background-color: #e1dfdd;
}
Я попробовал упростить структуру таблицы - убрал промежуточные tbody, чтобы был общий один родитель tbody у всех tr. Но результат остался таким же. Тут пример, где реализация sticky такая, как мне нужна. То есть проблема упирается в display: table у таблицы?