Адаптивные таблицы CSS
Адаптивная таблица показывает горизонтальную полосу прокрутки, когда экран слишком мал, чтобы вместить всю таблицу.
Чтобы создать такую таблицу, оберните <table> в контейнер <div> и установите overflow-x: auto на этом <div>.
Примечание: В macOS полосы прокрутки по умолчанию скрыты и появляются только во время использования, даже если задана прокрутка overflow.
Пример
Широкая таблица, обёрнутая в div с overflow-x: auto, прокручивается вбок на маленьких экранах.
Prompt
HTML-страница с адаптивной таблицей, которая прокручивается по горизонтали на маленьких экранах.
Во внутреннем блоке
<style> оформите таблицу (объединённые границы, полная ширина, ячейки с отступом и границей) и добавьте правило div.tablecontainer с overflow-x: auto. В теле страницы оберните широкую таблицу (много колонок) в div с классом "tablecontainer". На узком окне у таблицы должна появиться горизонтальная полоса прокрутки.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
div.tablecontainer {
overflow-x: auto;
}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<p>Resize the browser window to see the effect. A horizontal scrollbar appears when the screen is too small.</p>
<div class="tablecontainer">
<table>
<tr><th>First Name</th><th>Last Name</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th><th>Points</th></tr>
<tr><td>Jill</td><td>Smith</td><td>50</td><td>50</td><td>50</td><td>50</td><td>50</td><td>50</td><td>50</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td><td>94</td><td>94</td><td>94</td><td>94</td><td>94</td><td>94</td><td>94</td></tr>
<tr><td>Adam</td><td>Johnson</td><td>67</td><td>67</td><td>67</td><td>67</td><td>67</td><td>67</td><td>67</td><td>67</td></tr>
</table>
</div>
</body>
</html>