Dealing with Empty Cells

You can tell the browser how to handle empty cells. By default, the browser draws a separate border when a cell is empty.

empty-cells property has two values: show and hide

show is the default. The hide value tells the browser not to draw the border.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            table { 
                border-collapse: separate; 
                border-spacing: 10px; 
                empty-cells: hide; 
            } 
            th, td { 
                padding: 2px; 
            } 
        </style> 
    </head> 
    <body> 
        <table border="1"> 
            <tr> 
                <td>A</td> 
                <td>B</td> 
                <td>C</td> 
            </tr> 
            <tr> 
                <td>D</td> 
                <td>E</td> 
                <td></td> 
            </tr> 
        </table>         
    </body> 
</html>

Click to view the demo

Home
HTML CSS Book
CSS

Table Style: