Responsible tables, smart way

Question

I have a table containing data. Tabular data. And it looks like this.

See this script .

Now I would like, when it is displayed on a narrower screen, so that the table looks so that you do not get a horizontal scroll bar and keep the same visual structure:

(or if you want, for example this script .)

Now my question is: how do you do this? I would prefer only CSS, but so far I have not been able to do this only in CSS. (The second script contains rowspan attributes that do not have CSS equivalents.)

HTML is created on the server side, so I can create one of two layouts depending on the width of the window, but then it will not respond to window resizing.

I am not against small Javascript, but in this case, in order to convert the first table to the second one to resize the window, it would have to be divided and rebuilt, by cell, and I think this is overkill. Still looking for a media query that can do all the work.

Experimenting a bit, I came to close it , but it does not work in IE8 and IE9.

So, does anyone have any ideas how to handle this? The ideal solution will work on table cells of various heights (2 lines of text or more) and for any number of columns.

Answer 1

ya, since your html is the same, you can change the styles for css properties according to the media request, the best solution would be - fiddle

 @media only screen and (min-width: 769px) { #content { border:1px solid; border-collapse:collapse; } #content td, #content th { border:1px solid; text-align:left; padding:.07em .2em; white-space:nowrap; font-weight:400; } } @media only screen and (max-width: 768px) { #content { border:1px solid; border-collapse:collapse; } #content tr { height:4em; border-bottom:1px solid; } #content th { border:1px solid; text-align:left; padding:.07em .2em; white-space:nowrap; font-weight:400; height:4em; } #content td { padding:.07em .2em; white-space:nowrap; height:1.4em; display:inline; } #content td:not(:last-child)::after { display:block; content:''; height:0; border-bottom:1px solid; } } 

one of the possible solutions is to use media queries to hide the corresponding blocks or change the styles accordingly

here fiddle
changed the smaller table id to content2

 @media only screen and (max-width: 768px) { #content{ display:none !important; } } @media only screen and (min-width: 769px) { #content2{ display:none !important; } } 

Answer 2

I know this is not exactly what you want, but I created jsfiddle a while ago as a link that could help: jsfiddle.net/webbymatt/MVsVj/1

essentially the markup remains the same, there is no JS, and the content is simply recounted as expected. you just need to add the data type attribute to the table cell.

Answer 3

You can embed element locking. I did not have much time to play, but something like the following:

 #content { border:1px solid; border-collapse:collapse; } #content td, #content th { border:1px solid; text-align:left; padding:.07em .2em; white-space:nowrap; font-weight:400; } #content td { display: inline-block; width: 100px; } 

This is not the most beautiful creature, though!

http://jsfiddle.net/8H3bN/

Answer 4

Check CodePen .

I found this solution long ago at css-tricks.com.

The table is getting a little dirty:

 <table> <tr> <td> Description 1 </td> <td> <table class="responsive" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="text-center">Data 1A</td> <td class="text-center">Data 1B</td> <td class="text-center">Data 1C</td> </tr> </tbody> </table> </td> </tr> <tr> <td> Description 2 </td> <td> <table class="responsive" cellpadding="0" cellspacing="0"> <tbody> <tr> <td>Data 2A</td> <td>Data 2B</td> <td>Data 2C</td> </tr> </tbody> </table> </td> </tr> </table> 

And this is css:

  /* Small display targeting */ @media only screen and (max-width: 767px) { /* Force table to not be like tables anymore */ .responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .responsive thead tr { position: absolute; top: -9999px; left: -9999px; } .responsive td { /* Behave like a "row" */ position: relative; } .responsive td:before { /* Now like a table header */ position: absolute; } }