使空的表格单元格透明

Question

标题几乎是不言自明的。

正如您可能猜到的那样，我也尝试了这里的答案，但没有成功：

“ 如何使表格单元格的背景透明”

这是我的代码：

 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>

假设这是一项非常容易的任务，但不幸的是，我在这里...... :)

Answer 1

您不应该为表格行<tr>设置背景颜色。

如果你使<td>透明，它后面的行仍然会显示出来！

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

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

---

完整示例

 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>