Splitting A Table?

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?

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.

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.

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 :slight_smile:


Here’s the sideways scrolling example I mentioned but I still prefer the version above that goes to one column.

Thanks, all.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.