HTML | DOM Style emptyCells Property
Last Updated :
08 Aug, 2022
Sometimes HTML tables contain empty cells. The DOM Style emptyCells is used to display borders and background for the empty cells.
Syntax:
- It is used to return the emptyCells property.
object.style.emptyCells
- It is used to set emptyCells property.
object.style.emptyCells = "show|hide|initial|inherit"
Return Value:A string representing the border and background of empty cells.
Property Values:
- show: It means that the borders and background on empty cells will be shown. It is the default value of this property.
- hide: It means that the borders and background on empty cells won’t be shown.
- initial: It makes the property use its default value (i.e. show).
- inherit: It inherits the property from its parents element.
Example-1: The following code shows how to set the emptyCells property between the show and hide.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style emptyCells Property
</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>DOM Style emptyCells Property</h2>
<table id="a1" border="1">
<tr>
<th>Student Name</th>
<th>Age</th>
</tr>
<tr>
<td>Manas Chhabra</td>
<td>19</td>
</tr>
<tr>
<td>Hritik Bhatnagar</td>
<td></td>
</tr>
</table>
<br>
<button type="button" onclick="hide()">
Hide empty cells
</button>
<button type="button" onclick="show()">
Show empty cells
</button>
<script>
function hide() {
document.getElementById("a1").style.emptyCells
= "hide";
}
function show() {
document.getElementById("a1").style.emptyCells
= "show";
}
</script>
</center>
</body>
</html>
|
Output:
- Before click on Hide button:
- After clicking Hide button:
Example-2: The following code shows how to get the emptyCells property.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style emptyCells Property
</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>DOM Style emptyCells Property</h2>
<table id="a1" border="1"
style="empty-cells:hide;">
<tr>
<td></td>
<td>$</td>
</tr>
<tr>
<td>@</td>
<td></td>
</tr>
</table>
<button type="button" onclick="myFunction()">
test
</button>
</center>
<script>
function myFunction() {
console.log(document.getElementById("a1"
).style.emptyCells);
}
</script>
</body>
</html>
|
Output:
- Before clicking Test button:
- After clicking Test button:
Supported Browsers: The browser supported by DOM Style emptyCells Property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 8.0 and above
- Firefox 1.0 and above
- Opera 4.0 and above
- Apple Safari 1.2 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...