Inside-Only CSS Table border-spacing

Get rid of that outer padding caused by border-spacing.

by Steven Vachon

HTML

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

CSS

#container {
	background: red;
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1024px;
	padding: 0 10px;
	width: 100%;
}

table {
    border-collapse: separate;
	border-spacing: 10px;
	margin: 0 -10px;
	min-width: 100%;
}

td {
	background: green;
	width: 25%;
    
    /* fun */
	box-shadow: 0 0 6px 1px rgba(0,0,0, .6);
}