Как сделать таблицу адаптивной
Если бы таблицы могли хорошо адаптироваться под разные разрешения экранов, то человечество и по сей день делало бы табличную верстку. Я ещё застал то время и знаю, о чем говорю.
Однако мы живем в другое время, табличная верстка канула в лету, но потребность в использовании классических таблиц на сайтах все равно осталась. Поэтому мы не будем отрицать существование таблиц, а лучше узнаем о самом простом способе, как сделать таблицу адаптивной.
Демонстрация адаптивной таблицы.
HTML разметка
<div>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
</tr>
<tr>
<td>Юлия</td>
<td>Смирнова</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>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Эвелин</td>
<td>Яковлева</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>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Андрей</td>
<td>Петров</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>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
Мы создали простенькую HTML таблицу, пока она помещается на экране, все OK. При уменьшении ширины экрана, таблица будет срезаться и мы не увидим её данных или она станет очень мелкой и мы опять ничего не увидим.
Вы наверное заметили, что я поместил таблицу внутри тега div и очевидно не просто так. Сам по себе тег div ничего не даёт, пока мы не пропишем ему стили.
CSS стили
Задав всего одно свойство, таблица адаптируется, автоматически появится горизонтальная полоса прокрутки, когда содержимое внутри тега div перестанет влезать в текущую ширину экрана по оси X.
div (
overflow-x: auto;
)
Стилизуем остальные теги таблицы:
table {
border-collapse: collapse; /* Отображать только одинарные линии */
border-spacing: 0; /* Расстояние между ячейками */
width: 100%;
border: 1px solid #afb42b;
color: #212121;
}
th, td {
text-align: left;
padding: 8px;
}
Стилизация тега tr (ряд) заслуживает отдельного комментария. Уже стало нормой, когда табличные ряды имеют полосатый вид (зебра). Для этого используется псевдокласс :nth-child со значение в скобочках even. Значение even, всем четным элементам присваивает свойства, в нашем случае – это цвет фона. Таким образом, таблица будет полосатой.
tr:nth-child(even){
background-color: #f0f4c3
}
На каком бы вы этапе изучения сайто-строительства не находились, увидеть как прямо на ваших глазах верстают сайт и нанимают специалистов на фриланс бирже, вы можете в видео-курсе под названием "О создании лендинга под ключ".
-
Создано 26.10.2018 10:00:26
-
Михаил Русаков
Комментарии (1):
Т.е. появление горизонтальной полосы это адаптация таблицы? Что-то новенькое
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.