How to hide border and background on empty cells in a table using CSS ?
Last Updated :
10 May, 2023
In this article, we will learn how to hide borders and backgrounds on empty cells in a table using CSS. The empty-cells property of CSS is used to hide the borders and backgrounds on empty cells.
Approach: The empty-cells property of CSS is used to hide the borders and backgrounds on empty cells. To hide the borders and backgrounds on empty cells, we will set the empty-cells value to hide that will hide the borders and backgrounds of empty cells.
Syntax:
empty-cells: hide;
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< style >
.gfg {
font-size: 50px;
empty-cells: hide;
}
td,
th {
background-color: rgb(0, 168, 0);
border: solid 1px red;
}
</ style >
</ head >
< body >
< table class = "gfg" border = "1" >
< tr >
< td >Name</ td >
< td >Marks</ td >
</ tr >
< tr >
< td >Nikhil</ td >
< td >200</ td >
</ tr >
< tr >
< td >Vijay</ td >
< td ></ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:
Before applying empty-cells property:
After applying empty-cells property:
Share your thoughts in the comments
Please Login to comment...