Make empty table cells transparent

Question

The title is pretty much self-explanatory.

I have also tried the answer from here without any success as you might guess:

" How to make background of table cell transparent "

Here is my code:

 body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==") } table { background: transparent; margin-left: auto; margin-right: auto } tr, td, th { background-color: #d80500; border: 3px solid #f4f000; color: #f4f000; height: 40px; text-align: center; width: 200px } tr:empty, td:empty, th:empty { background-color: transparent; opacity: 0 }

 <table> <tr> <th>Hezi</th> <th></th> <th>Gangina</th> </tr> <tr> <td>MKD</td> <td></td> <td>SLD</td> </tr> <tr> <td>DBD</td> <td>LRD</td> <td>SLD</td> </tr> <tr> <td></td> <td>SLD</td> <td>MKD</td> </tr> </table>

Suppose to be a very easy task but unfortunately, I'm here... :)

Answer 1

You should not set a background color for table rows <tr> .

If you make the <td> transparent, the row behind it will still show through!

td,
th {
  background-color: #d80500;
  border: 3px solid #f4f000;
}

td:empty,
th:empty {
  background-color: transparent;
  border: none; /* optional? */
}

---

Full example

 body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==") } table { background: transparent; margin-left: auto; margin-right: auto } td, th { background-color: #d80500; border: 3px solid #f4f000; color: #f4f000; height: 40px; text-align: center; width: 200px } td:empty, th:empty { background-color: transparent; border: none; /* optional? */ }

 <table> <tr> <th>Hezi</th> <th></th> <th>Gangina</th> </tr> <tr> <td>MKD</td> <td></td> <td>SLD</td> </tr> <tr> <td>DBD</td> <td>LRD</td> <td>SLD</td> </tr> <tr> <td></td> <td>SLD</td> <td>MKD</td> </tr> </table>

Answer 2

display: none;

 body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==") } table { background: transparent; margin-left: auto; margin-right: auto } tr, td, th { background-color: #d80500; border: 3px solid #f4f000; color: #f4f000; height: 40px; text-align: center; width: 200px } tr:empty, td:empty, th:empty { display: none; }

 <table> <tr> <th>Hezi</th> <th></th> <th>Gangina</th> </tr> <tr> <td>MKD</td> <td></td> <td>SLD</td> </tr> <tr> <td>DBD</td> <td>LRD</td> <td>SLD</td> </tr> <tr> <td></td> <td>SLD</td> <td>MKD</td> </tr> </table>