Border collapsing 2
Collapsing table cell borders and table borders.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Border collapsing 2</title>
<style>
table {
border: 1px solid black;
}
td, th {
padding: 0.1em 1em;
border: 10px solid #ccc;
}
#t2 {
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Border collapsing 2</h1>
<h2><code>border-collapse: separate;</code> (default)</code></h2>
<table>
<tr>
<th colspan="2">Carnivores</th>
<th>Primates</th>
</tr>
<tr>
<td>Tiger</td>
<td>Grey Wolf</td>
<td>Indri</td>
</tr>
<tr>
<td>Cheetah</td>
<td>Cape hunting dog</td>
<td>Sifaka</td>
</tr>
<tr>
<td>Caracal</td>
<td>Red fox</td>
<td>Brown lemur</td>
</tr>
<tr>
<td>Wildcat</td>
<td>Fennec</td>
<td>Dwarf lemur</td>
</tr>
</table>
<h2><code>border-collapse: collapse;</code></code></h2>
<table id="t2">
<tr>
<th rowspan="2">Carnivores</th>
<td>Tiger</td>
<td>Cheetah</td>
<td>Caracal</td>
<td>Wildcat</td>
</tr>
<tr>
<td>Grey Wolf</td>
<td>Cape hunting dog</td>
<td>Red fox</td>
<td>Fennec</td>
</tr>
<tr>
<th>Primates</th>
<td>Indri</td>
<td>Sifaka</td>
<td>Brown lemur</td>
<td>Dwarf lemur</td>
</tr>
</table>
<!-- Link back to HTML Dog: -->
<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>