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

Question

[Sergiu Mitu]

Есть проект на верстку адаптивного сайта, макетов под маленькие разрешения нет, все на усмотрение верстальщика, как адаптировать таблицы? к примеру вот такую? ну до 768px я думаю ещё читабельно будет, а дальше что делать? как поступать на 320px, 480px? всем спасибо.

Answer 1

[Александр Зубарев]

Вот есть репозиторий - это готовый шаблон для адаптивной верстки. В файле grid.html можно увидеть адаптивную таблицу.
Есть живой пример, чтобы посмотреть как сжимается таблица
Также пример на codepen

Answer 2

[lnked]

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

.table-container {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

Comments

[Sergiu Mitu]

то есть вы предлагаете обычный блок с горизонтальным скроллом?
как вариант сойдет, спасибо, но может есть и другие альтернативы.

[lnked]

Сергей: Можно попробовать так https://css-tricks.com/responsive-data-tables/

Answer 3

[Ihor Gevorkyan]

посмотрите, как адаптируют таблицы Bootstrap / Zurb Foundation или другие frontend-frameworks.
Но, в основном, таблицам просто предоставляют возможность вертикальной прокрутки за счет свойства
overflow-x: scroll
Это лучшее решение, если использовать именно <table></table>.

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

display: table;
display: table-row;
display: table-cell;

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