Таблицы для маленьких экранов

Если вы часто пользуетесь таблицами (tables) в своих блогах, могли заметить, что они часто искажаются на маленьких экранах.

Добавьте в настройках этот код CSS и таблицы будут прекрасно себя вести в телефонах и других мелких девайсах.

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 8px;
  border: 1px solid #ddd;
}
.table-container {
  overflow-x: auto;
}

Для того, чтобы этот код работал, таблицы нужно размещать внутри такого контейнера:

<div class="table-container">TABLE</div>

Популярные записи