Grow your CSS skills. Land your dream job.

Making one table appear to be multiple tables via CSS?

  • # March 22, 2013 at 10:37 am

    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?

    # March 22, 2013 at 10:49 am

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".