1

есть вопрос. У меня есть таблица с главным хедером - 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 у таблицы?

1 ответ 1

0

Проблема в display: table/table-row/table-cell; - дефолтном display таблицы. Если его менять, то sticky начинает себя вести нормально. Но тут возникает другая проблема - ячейки таблицы перестают быть связаны между собой по ширине.

Вижу 3 варианта:

  1. Оставить как есть.
  2. Пересчитывать в js ширины колонок. (нужно считать ширину ячеек при построении DOM дерева страницы; отслеживать ширину экрана и менять если что ширину ячеек, или запретить перенос слов в таблице; если данные динамично поступают в таблицу - думаю понятно, но сложностей больше и вряд ли того стоит)
  3. Сделать на гридах, где есть div родитель и div ячейки, без row (и обвешать это все role атрибутами). div-row можно будет добавлять, когда появится нормальная поддержка subgrid (ну и не рассчитывать на работоспособность в старых браузерах).

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.