Dealing with Empty Cells
Description
You can control how to handle empty cells. By default, the browser draws a separate border when a cell is empty.
You can control this behavior using the empty-cells property. The show value, which is the default, while the hide value tells the browser not to draw the border.
Example
The following code uses the empty-cells Property.
<!DOCTYPE HTML>
<html>
<head>
<style>
table {<!--from w ww . ja va 2s .co m-->
border-collapse: separate;
border-spacing: 10px;
empty-cells: hide;
}
th, td {
padding: 2px;
}
</style>
</head>
<body>
<table border="1">
<caption>Results of the 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></th>
<th>Color</th>
<th colspan="2">Size</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th>
<td>C</td>
<td></td>
<td>A</td>
<td>Q</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>W</td>
<td>W</td>
<td></td><td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 java2s.com Data</th>
</tr>
</tfoot>
</table>
</body>
</html>