Как сделать в html таблицу с прокручивающимся скролбаром?
2 ответа
@elissa
Чтобы создать таблицу с прокручивающимся скроллбаром в HTML, вы можете использовать CSS свойство overflow: scroll для элемента <div>, внутри которого будет находиться таблица.
Вот пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Заголовок 1
Заголовок 2
Заголовок 3
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5
Ячейка 6
|
В этом примере <div> задается фиксированный размер (ширина и высота) с использованием атрибутов style="width: 300px; height: 200px;". Если таблица содержит достаточное количество строк или столбцов, чтобы не поместиться в заданные размеры <div>, то внутри <div> автоматически появится скроллбар для прокрутки таблицы.
@elissa
Также можно использовать CSS свойство overflow для элемента таблицы напрямую, чтобы добавить прокручивающийся скроллбар. Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Scrollbar</title>
<style>
table {
width: 100%;
border-collapse: collapse;
overflow: auto;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<div style="width: 300px; height: 200px; border: 1px solid black; overflow: auto;">
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<!-- Добавьте больше строк по мере необходимости -->
</tbody>
</table>
</div>
</body>
</html>
|
В этом примере таблица имеет стиль overflow: auto;, который добавляет прокручивающиеся скроллбары, когда контент таблицы не помещается в указанном размере элемента <div>.