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.
Добавить комментарий