[英]How do I make empty cells editable in a Sudoku table in javascript?
[英]Make empty table cells transparent
標題幾乎是不言自明的。
正如您可能猜到的那樣,我也嘗試了這里的答案,但沒有成功:
這是我的代碼:
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>
假設這是一項非常容易的任務,但不幸的是,我在這里...... :)
您不應該為表格行<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>
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.