EaGames
@EaGames
Front-end developer

Как адаптировать таблицы?

Есть проект на верстку адаптивного сайта, макетов под маленькие разрешения нет, все на усмотрение верстальщика, как адаптировать таблицы? к примеру вот такую? ну до 768px я думаю ещё читабельно будет, а дальше что делать? как поступать на 320px, 480px? всем спасибо.
  • Вопрос задан
  • 27064 просмотра
Решения вопроса 1
zualex
@zualex
Senior Software Engineer
Вот есть репозиторий - это готовый шаблон для адаптивной верстки. В файле grid.html можно увидеть адаптивную таблицу.
Есть живой пример, чтобы посмотреть как сжимается таблица
Также пример на codepen
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@lnked
<div class="table-container">
    <table></table>
</div>


.table-container {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
Ответ написан
Igor-Maf
@Igor-Maf
Senior Front End developer
посмотрите, как адаптируют таблицы Bootstrap / Zurb Foundation или другие frontend-frameworks.
Но, в основном, таблицам просто предоставляют возможность вертикальной прокрутки за счет свойства
overflow-x: scroll
Это лучшее решение, если использовать именно <table></table>.

Если есть возможность, не знаю, как будет у Вас в проекте, то лучше не использовать таблицы, а имитировать работу таблиц за счет CSS свойств.
display: table;
display: table-row;
display: table-cell;

В таком случае, будет возможность именно адаптировать таблицы.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы