Inside-Only CSS Table border-spacing
Get rid of that outer padding caused by border-spacing.
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</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: 5px;
}
td {
background: green;
width: 25%;
/* fun */
box-shadow: 0 0 6px 1px rgba(0,0,0, .6);
}