Collapsing Table Borders
Description
The border-collapse property controls the way that the browser draws table borders.
It controls borders on adjacent cells.
Its possible values are collapse or separate.
The browser draws a border around the table plus a border around each cell, creating a double border effect. You can address this by applying the border-collapse property.
Example
The following code uses the border-collapse Property.
<!DOCTYPE HTML>
<html>
<head>
<style>
table {<!--from w ww . ja v a 2s .c o m-->
border-collapse: collapse;
}
th, td {
padding: 2px;
}
</style>
</head>
<body>
<table border="1">
<caption>Results of Survey</caption>
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"/>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th>
<td>A</td>
<td>B</td>
<td>C</td>
<td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 java2s.com Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
The collapse value tells the browser that you don't want borders drawn on every edge of adjacent elements.
Example 2
<!-- www . j ava 2 s . c om-->
<html>
<head>
<style rel="stylesheet" type="text/css">
table {
border-collapse: separate;
border-spacing: 20px;
border: 1px solid black;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell one</td>
<td>Cell two</td>
</tr>
<tr>
<td>Cell three</td>
<td>Cell four</td>
</tr>
</table>
</body>
</html>
Example 3
The following code shows how to compare separate and collapse table border.
<html>
<body>
<table id="myTable" border="1" style="border-collapse: collapse">
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr><!--from w ww . j a v a 2s. c o m-->
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>
<button onclick="myTable.style.borderCollapse='separate'">separate</button>
<button onclick="myTable.style.borderCollapse='collapse'">collapse</button>
</body>
</html>