[英]Make empty table cells transparent
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... :)假设这是一项非常容易的任务,但不幸的是,我在这里...... :)
You should not set a background color for table rows <tr>
.您不应该为表格行<tr>
设置背景颜色。
If you make the <td>
transparent, the row behind it will still show through!如果你使<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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.