Steven Vachon

Inside-Only CSS Table border-spacing


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.


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>
			<td>3 — Let's put a whole bunch of content in here so that it stretches to 100% width on most monitors.</td>

…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!



Leave a Reply

Comments welcome! Name & email required; email always kept private. Please use basic markup. Wrap code with <code> tags.