HTML | DOM Style emptyCells Property
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 to show or hide emptyCell border --> <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
Please Login to comment...