When working with a <table> or display:table layout, getting some nice space between each cell can be a real pain. Resorting to hacks like padding or a transparent border sometimes work, but not if you need a visible border or box-shadow. Having come up with a half-complete solution, I came across Percentage Plus Pixel Sizing and figured out the rest.
Note: there must be substantial content in at least one cell for it to stretch the table to 100% width.
Demo
Check out the jsFiddle.
How To Set It Up
Let’s start with a table and some basic content:
<div id="container"> <h1>This is a title</h1> <p>This is a paragraph.</p> <table> <tr> <td>1</td> <td>2</td> <td>3 — Let's put a whole bunch of content in here so that it stretches to 100% width on most monitors.</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </div> |
…and some CSS:
table { border-collapse: separate; border-spacing: 10px; margin: 0 -10px; /* ejects outer border-spacing */ min-width: 100%; /* in case content is too short */ } td { background: green; width: 25%; /* keeps it even */ } |
With substantial content, having -10px applied to the horizontal margins kind of simulates width:100% and pulls the outer border-spacing off the page.
We could stop here if working with a constant 100% width page. However, typical web design structures will often result in horizontal overflow and sometimes visible scrollbars.
#container { background: red; box-sizing: border-box; /* avoids exceeding 100% width */ margin: 0 auto; max-width: 1024px; padding: 0 10px; /* fits table overflow */ width: 100%; } |
The padding will fit the <table> overflow and in this working example, box-sizing will ensure that the container does not exceed the <body>.
As you can see in the demo, the table lines up perfectly with the content above it. Fluid and responsive. Don’t forget that it also works with a display:table layout. Enjoy!
Comments
Top