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>
Home
HTML CSS Book
CSS
HTML CSS Book
CSS
Table Style:
- Styling Tables
- Configuring Separated Borders
- Dealing with Empty Cells
- Positioning the Caption
- Specifying the Table Layout
Related: