Splitting A Table?

[Engine44]

Good morning,

Let’s say you have a table with 8 columns. On mobile screens there isn’t enough width to display all 8.
In that case can can the table be split into two 4-column tables? If yes, what is the best way to do it?
Thanks

[RyanReese]

The “normal” solution would be to allow the table to scroll horizontally. I like having a parent

with overflow-x: auto to allow it to scroll.

I do not know of a way to do what you want with CSS alone.

[tracknut]

I’m not sure of the “normal” implementation, but you could turn your table into two 4-column tables, set to “display:inline-block”. If the screen is wide, they will display next to each other (and you could set up the margins and what-not so they looked like a single table), and if the screen didn’t allow both next to each other, the one on the right would drop below.

[PaulOB]

I prefer to go to one column for small screen as 4 columns is generally too wide.

Alternatively use position sticky for header and first column and scroll table sideways.

I have an example somewhere which I will post when I get back home

Edit:

Here’s the sideways scrolling example I mentioned but I still prefer the version above that goes to one column.
https://codepen.io/paulobrien/full/LBrMxa

[Engine44]

Thanks, all.