0

I have a lengthy, but narrow two-column table. Rather than scroll vertically down the page, I want the table to wrap into as many columns as the page will fit. So I put that table into a div tag with multiple columns:
<div style="column-count: 4; column-width: 300px;">

Works pretty well, but I can't get the headers to repeat on screen where the table wraps across multiple container columns. Browsers only seem to repeat the table headers if you print the page.

Anyone know a better way to split a long and narrow table into multiple columns, or how to force headers to be repeated?

Screenshot of what I have so far

TylerH
  • 20,799
  • 66
  • 75
  • 101
phillipdhall
  • 21
  • 4
  • Please see [ask] and take the [tour], then revise to add more detail and a functional snippet. Screenshots aren't adequate. – isherwood Jul 09 '21 at 18:59

2 Answers2

0

I don't think that this is possible.

However, an idea might be to create a similar div just above the "data" on that contains only the column titles. Styled properly, one won't even notice that it's a different element.

TylerH
  • 20,799
  • 66
  • 75
  • 101
LGT
  • 4,957
  • 1
  • 21
  • 22
0

Basically, it is possible but the end result is not ideal. This is what you're asking for: https://codepen.io/z-/pen/QWvKbMZ (if you don't use Pug or SCSS, click the v and click "View Compiled x")

The problem being is that the column property kinda sucks. You're better off using CSS grid if the order doesn't really matter. In the html change .table.column into .table.grid to see what that's like. Just note that the direction is left to right then up to down. It also allows you to have the columns change number based on how many can fit without ever having gross horizontal scroll bars.

In the future it's a good idea to give it a go and show what you have tried rather than making it a request. I was just curious enough to give it a couple minutes of work.

Zed
  • 651
  • 1
  • 5
  • 25