Создание таблицы HTML с вертикальной прокруткой внутри тега tbody

HTML и CSS предоставляют нам множество инструментов для создания и стилизации веб-элементов. Однако, иногда нам приходится сталкиваться с задачами, которые кажутся простыми на первый взгляд, но оказываются сложными при попытке их реализовать.

Одна из таких задач — создание таблицы с вертикальной прокруткой внутри тега <tbody>. Возможно, вы захотите создать таблицу, которая бы занимала 100% ширины экрана, но при этом имела бы ограниченную высоту для тела таблицы (<tbody>), с возможностью вертикальной прокрутки. Это может быть полезно, когда у вас в таблице много строк, и вы не хотите, чтобы она занимала слишком много места на странице.

Вот базовый пример такой таблицы:

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
      <!-- и так далее... -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Данные 1</td>
      <td>Данные 2</td>
      <!-- и так далее... -->
    </tr>
    <!-- и так далее... -->
  </tbody>
</table>

Чтобы добавить прокрутку, можно воспользоваться свойством overflow: auto в CSS. Однако, просто применить это свойство к тегу <tbody> не приведет к желаемому результату. Это связано с тем, что по умолчанию <tbody> является блочным элементом, и свойство overflow не работает с такими элементами.

Вместо этого, мы можем применить некоторые дополнительные CSS-стили, чтобы заставить его работать:

table {
    width: 100%;
}
thead, tbody tr {
    display: table;
    width: 100%;
}
tbody {
    display: block;
    width: 100%;
    height: 200px;
    overflow: auto;
}

В этом примере мы задаем <tbody> стиль display: block, чтобы сделать его блочным элементом, а затем применяем overflow: auto, чтобы добавить прокрутку. Обратите внимание, что мы также задаем высоту для <tbody>, иначе прокрутка не будет работать.

Таким образом, можно создать таблицу с вертикальной прокруткой внутри <tbody>, используя только HTML и CSS, без необходимости добавлять дополнительные элементы или использовать JavaScript.