Есть ли способ сделать прокрутку тела таблицы без использования параметра «display: block»? - PullRequest
Новая
       5

Есть ли способ сделать прокрутку тела таблицы без использования параметра «display: block»?

0 голосов
/ 04 марта 2020

У меня проблема с отображением прокручиваемой таблицы. Я хочу прокрутить только тело таблицы без заголовка. Когда я устанавливаю параметр «display: block», он смещает таблицу и выглядит не так хорошо, как с этим параметром. Но когда я удаляю «display: block», то возможность прокрутки исчезает. Знаете ли вы какие-либо другие способы сделать таблицы прокручиваемыми? Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 04 марта 2020

Вы можете использовать вместо оболочки и position:sticky, таким образом алгоритм компоновки таблицы работает для всей таблицы, и все столбцы и строки остаются идеально выровненными.

Класси c Использование в приведенном ниже фрагменте : 

.myTableWrapper {
width:min-content;/* wraps onto table's width */
height: 100px;
overflow-y:auto;
padding-right:1.3em;
}
thead {
background:white;
position:sticky;
top:0;
}
<div class="myTableWrapper">
  <table>
    <thead>
      <tr><th>TH</th><th>TH</th><th>TH</th><th>TH</th><th>TH</th></tr></thead>
    <tbody>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
      <tr><td>td</td><td>td</td><td>td</td><td>td</td><td>td</td></tr>
    </tbody>
  </table>
</div>

или вы можете играть с display:grid и display:content с, чтобы избежать обертки и перехода от таблицы к модели grd.

изменяемый размер живого примера с липкими заголовками => https://codepen.io/gc-nomade/pen/abboqbR, но display:contents пока не везде понятен.

...