How to make a responsive table?

Question

css

Layout without using JS adaptive table, as in the screenshots, for three screen sizes: 0-600, 601-1024, 1025-...
For the largest screens, the text in the cell should be vertically aligned, for smaller ones it is not necessary.
Using jQuery to make it so that on the middle screen the text is also vertically aligned.
Actually stuck on the second resolution:
codepen.io/Benny214/pen/xDrij

Answer 1

decided everything!
codepen.io/Benny214/pen/xDrij

Answer 2

Don't use the table by itself. Use nested blocks. Depending on the width of the screen, prescribe one or the other display: table /table-cell and you will be happy.
www.senktec.com/2014/01/using-css-display-table-ce...

Answer 3

You really need to typeset on blocks. But I'm more concerned about another question .. An example of information that is reasonable to present this way?
Last name First name Middle name Address
Last name First name
Middle name Address
Last
name First name
Middle name
Address
IMHO a table row is a logical entity. Integral and indivisible ..
And about the responsiveness of tabular data, you can read here

Answer 4

Here is a repository - this is a ready-made template for adaptive layout.
In the example, you can see the adaptive table.

Answer 5

I understand that necroposting, but maybe someone will need codepen.io/dudleystorey/pen/Geprd
or without Java - codepen.io/pixelchar/pen/rfuqK

Answer 6

I am using bootstrap. here and adaptability and simplicity

Answer 7

frontender.info/simple-responsive-table
https://habrahabr.ru/post/149742/
there are examples of implementing an adaptive table.
I liked the way from Chris Coyier, but there is one drawback here, if there are merged cells, then the table is not built correctly.
I also used the option with scrollbars, but there is also a minus here, users do not see the scroll