We would like to know how to set Table border-spacing for table inside div.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#container {<!-- www .j av a 2s .c o m-->
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%;
box-shadow: 0 0 6px 1px rgba(0, 0, 0, .6);
}
</style>
</head>
<body>
<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 this is a test.</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</div>
</body>
</html>
The code above is rendered as follows: