All geek questions in one place

Revision Design - Wide Tables

I am making a proof of concept with a responsive design. One web page that I am modifying has some extremely wide tables. I really don't know how to reduce the width of the tables, so there is no horizontal scrollbar in the mobile browser.

I'm just wondering if anyone has a solution for extremely wide tables using a responsive design. Oh, and I wanted to add that I cannot hide the columns in the table.

Thanks in advance

0
source share
3 answers

The best way to do this is to completely reformat the table:

http://jsfiddle.net/MLZEb/9/

tbody, tr, th, td { display: block } thead { display: none } td:before { content: attr(data-label); display: inline-block; width: 6em; padding-right: 1em; vertical-align: middle; } td:first-child { background: #CCC; }

For this, td must have a data-label attribute for effective use: <td data-label="Favorite Color">Blue</td> . Typical th elements in column headers are expected to be in the thead tag.

+9
source

My reaction to the knee will be to put the table in a scrollable container . Adding a little bit of JavaScript to enable drag and drop content would be useful for desktop users. Mobile users could take advantage of dragging their own items.

<Sub> HTML: sub>
 <div class="container"> <table> ... </table> </div>
<Sub> CSSsub>
 td { padding: 10px; } .container { width: 100%; overflow: auto; }
+2
source

A typical way to solve the problem with a large table is to present only the main columns at the beginning and provide a user interface for adding additional columns interactively.

0
source

Source: https://habr.com/ru/post/1496843/

More articles:


All Articles