Style emptyCellsProperty
Style Object
Definition and Usage
The emptyCells property sets or returns whether the borders and background of empty cells in a table are shown.
Syntax
Set the emptyCells property:
Object.style.emptyCells="show|hide|inherit"
Return the emptyCells property:
Object.style.emptyCells
| Value | Description |
|---|---|
| show | Show the borders and background of empty cells, i.e., draw borders around empty cells. |
| hide | Hide the borders and background of empty cells, i.e., do not draw borders around empty cells. |
| inherit | The value of the emptyCells property is inherited from the parent element. |
Browser Support
All major browsers support the emptyCells property.
Note:The default value varies in different browsers. In IE, Chrome, and Safari, the default value is "show", while in Firefox and Opera, the default value is "hide".
Note:IE7 and earlier versions do not support the emptyCells property. IE8 only supports the emptyCells property if a !DOCTYPE is specified. IE9 supports the emptyCells property.
Examples
Examples
Change the display mode of empty cells:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function show(){
document.getElementById("myTable").style.emptyCells="show";
}
function hide(){
document.getElementById("myTable").style.emptyCells="hide";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
</table>
<br>
<button type="button" onclick="show()">Show empty cells</button>
<button type="button" onclick="hide()">Hide empty cells</button>
<p><b>Note:</b> Internet Explorer 8 and earlier versions must declare !DOCTYPE in order to support the empty-cells property.</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function show(){
document.getElementById("myTable").style.emptyCells="show";
}
function hide(){
document.getElementById("myTable").style.emptyCells="hide";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
</table>
<br>
<button type="button" onclick="show()">Show empty cells</button>
<button type="button" onclick="hide()">Hide empty cells</button>
<p><b>Note:</b> Internet Explorer 8 and earlier versions must declare !DOCTYPE in order to support the empty-cells property.</p>
</body>
</html>
Try it Yourself »
Style Object Other Extensions