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">&copy; 2011  java2s.com  Data</th>
        </tr>
    </tfoot>
    </table>
</body>
</html>

Click to view the demo





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table