Javascript Reference - HTML DOM Style emptyCells Property








The emptyCells property sets or gets whether to show the border and background of empty cells.

Browser Support

emptyCells Yes Yes Yes Yes Yes

Syntax

Return the emptyCells property:

var v = object.style.emptyCells

Set the emptyCells property:

object.style.emptyCells='show|hide|initial|inherit'

Property Values

Value Description
hide empty cells will not have background or borders
show Show background and borders for empty cells. Default value
inherit Inherit the empty-cells property from the parent element




Technical Details

Default Value: show
Return Value: A string representing the border and background of empty cells
CSS Version CSS2

Example

The following code shows how to change how empty cells are shown:


<!DOCTYPE html>
<html>
<head>
<style> 
table, td {<!--from w  ww. j a v  a 2s. c o  m-->
    border: 1px solid black;
    margin: 15px;
}
</style>
</head>
<body>
<button type="button" onclick="hide()">Hide empty cells</button>
<button type="button" onclick="show()">Show empty cells</button>

<table id="myTable">
  <tr>
    <td>A</td>
    <td></td>
  </tr>
  <tr>
    <td>B</td>
    <td></td>
  </tr>
</table>
<script>
function hide() {
    document.getElementById("myTable").style.emptyCells = "hide";
}

function show() {
    document.getElementById("myTable").style.emptyCells = "show";
}
</script>

</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to get the emptyCells property.


<!DOCTYPE html>
<html>
<head>
<style> 
table, td {<!-- w w  w . j av a 2s.  c o  m-->
    border: 1px solid black;
    border-collapse: separate;
}
</style>
</head>
<body>

<table id="myTable" style="empty-cells:hide;">
  <tr>
    <td></td>
    <td>$1</td>
  </tr>
  <tr>
    <td>A</td>
    <td></td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTable").style.emptyCells);
}
</script>

</body>
</html>

The code above is rendered as follows: