When we are manipulating data in a table HTML it may be the case that we are not interested in showing certain cells lacking content and we want to hide empty cells. Possibly this improves the aesthetics when presenting our data.
In the same way, it could be the case that we are using the table for other purposes such as presenting certain content. And we are not referring to formatting the page, since we should be doing this with DIV layers.
In this chaos we are going to hide empty cells to represent selected elements within a table. With the characteristic that each selected element will be given a color. In order to do this we would have to consider which element is selected and assign it a new style when you select it.
What we have done in this case is give a red color to all the cells in the table using the background-color.
table td {
background-color:red;
}
In addition we can see that there are some cells selected with an X and other cells that are empty. The next thing will be to blank all those empty cells. To do this, instead of going to each cell what we are going to do is hide empty cells, this way, since they are empty, no style will be assigned to them.
To hide empty cells we must manipulate the empty-cells attribute and specifically, to hide them, we will assign the value hide.
In this way the CSS code that will be the following:
table {
empty-cells: hide;
}
We see that the empty-cells attribute we have given it to the entire table.