How to Hide Border and Background on Empty Cells in a Table using CSS?
Last Updated :
21 Nov, 2024
Improve
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 To Hide Border and Background on Empty Cells In A Table
- The
empty-cells: hide;style of the.gfgclass hides any cells in the table without content, so they don’t appear visibly. - The table cells have a green background with a red border, and the text is larger (50px) for clear visibility.
<!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
