html - 如何使用 HTML 和 CSS 制作数独网格？

Question

请问这个简单的问题。我按照以下方式设计了一个数独网格。

编辑(使用表格):

     <table id="grid" border="1" style="border-collapse: collapse;">
                <tr class="row">
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>

                    <!--row--></tr>
                     ---------------------------------------------------------
                     ---------------------------------------------------------

                <tr class="row">
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                    <td class="cell"><input type="text" maxlength="1"></td>
                <!--row--></tr>
     </table>

The CSS for the document is

#game {
    width: 600px;
    height: 600px;

    margin-top: 20px;
    margin-bottom: 100px;
    margin-left: 30px;

    position: absolute;
    display: block;
    background-color: white;
}

#grid {
    width: 378px;
    height: 395px;

    margin-left: 20px;
    margin-top: 50px;

    border: 3px solid #000000;
}

.cell input {
    display: inline-block;
    float: left;

    border: 1px solid black;
    width: 40px;
    height: 40px;

    text-align: center;
    font-size: 30px;
}

但我无法使每第三列和第三行变粗，以便每个 3 * 3 单元格 block 都清晰可见。谁能指导我？提前致谢。

Answer 1

您可以使用 :nth-child(n) 选择器来加粗一些边框: DEMO

---

对于 table ，您可以使用这些 CSS 规则:

table {
  margin:1em auto;
}
td {
  height:30px;
  width:30px;
  border:1px solid;
  text-align:center;
}
td:first-child {
  border-left:solid;
}
td:nth-child(3n) {
  border-right:solid ;
}
tr:first-child {
  border-top:solid;
}
tr:nth-child(3n) td {
  border-bottom:solid ;
}