Making one table appear to be multiple tables via CSS?

[jeffcrump]

Has anyone ever been able to wrangle a table’s appearance to make it look like multiple tables?

I have a table with multiple headers, breaking the content into four sections. I feel like a user would get overwhelmed, so I was looking for a way to add space above the in-table headers… to make the one table feel like four.

I know tables can have some counter-intuitive behavior, and this is no exception. Has anyone here tried something like this before?

[Merri]

One quick hack for this: http://codepen.io/Merri/pen/Diprg

A more reliable (and backwards compatible) way would be to give enough top padding to the headers and maybe use `vertical-align: bottom;` to align text to the bottom. You can also adjust text position using `line-height` and `padding-bottom` if it goes too down. Many ways to go with this.

[Author]

Posts