How to adapt tables?

Question

css

There is a project for the layout of an adaptive site, there are no layouts for small resolutions, everything is at the discretion of the layout designer, how to adapt tables? like this one for example ? well, up to 768px, I think it will still be readable, and then what to do? how to act on 320px, 480px? thanks to all.

Answer 1

Here is a repository - this is a ready-made template for adaptive layout. In the grid.html file, you can see the adaptive table.
There is a live example to see how the table is compressed
Also an example on the codepen

Answer 2

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

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

Answer 3

see how Bootstrap / Zurb Foundation tables or other frontend-frameworks adapt.
But, in general, tables are simply provided with the ability to scroll vertically due to the property .
This is the best solution if you use <table></table>.
If possible, I don’t know how it will be in your project, then it’s better not to use tables, but to imitate the work of tables due to CSS properties.

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

In this case, it will be possible to adapt the tables.