3

I have an HTML table with 17 columns over 2 header rows and 1 body row. On most desktop views, this table fits nicely with my design, but on small screens the table overhangs its parent element and a significant amount of horizontal scroll is created.

I was wondering if there's a way in CSS/HTML/JS to catch a table going over a certain width, or counting a number of columns (or any other sensible way of doing it), and causing it to 'break' over into a new line, the same way a line break would be added to a paragraph. I want to catch this programatically (rather than just rewriting the table to multiple tables) as the large-screen experience is dramatically better without this hypothetical column-line break.

Ideally I'd like to keep the css definitions of table-cell etc (as in, not just make everything display: block and be done with it).

To add to the complications, some of the header cells in the top row span two columns. I'm hoping a solution can be found that either doesn't break those cells, or copies the text in the cell to both columns after a break is made.

This is all inside the Foundation 6 framework, if there's any tools there that I've missed. I tried using Foundation's <table class="stack">, but it doesn't work - it only shows the body row, I think because some of the header cells span multiple columns.

Ace Jon
  • 31
  • 3
  • Would any of the answers to [Responsive tables, the smart way](https://stackoverflow.com/questions/19723617/responsive-tables-the-smart-way) help? – Mr Lister May 28 '19 at 13:07
  • Good shout @MrLister, I'll have a play with those and see if I can achieve what I'm after. Thanks. – Ace Jon May 28 '19 at 13:36

2 Answers2

0

You can try to use css-grid with media-query

More

Example

HTML
<ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>D</li>
 <li>E</li>
 <li>F</li>
</ul>

CSS
ul {
 display: grid;
 grid-template-columns: 140px 140px 140px 140px;
 grid-gap: 10px;
}

@media only screen and (max-width: 800px) {
 ul {
  grid-template-columns: 200px 200px;
 }

}

Jiml
  • 377
  • 3
  • 9
0

Having done more research, I can see there's no 'proper' way to do what I wanted to do. In my case, the simplest way to achieve the desired result visually was to make each column/column pair its own table, and then make those tables display as blocks and float to the left. This isn't great semantically (a new table for every major data point), but it's for an internal tool to be used by a small team, so I'm not spending more time on this.

Ace Jon
  • 31
  • 3