如何使用 HTML 和 CSS 制作数独网格？答案

【问题标题】：How to make a sudoku grid using HTML and CSS?如何使用 HTML 和 CSS 制作数独网格？
【发布时间】：2014-05-06 14:23:13
【问题描述】：

对不起，这个简单的问题。我通过以下方式设计了一个数独网格。

已编辑（使用表格）：

     <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>

文档的 CSS 是

#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 的单元格块都清晰地显示出来。谁能指导我？提前致谢。

【问题讨论】：

这实际上是一个适用于 HTML 表格的有效应用程序。
使用表格。这就是它们的意义......
@Diodeus 我也用桌子做过。但问题是一样的。每一行和每一列都以相似的方式出现。
您需要使用css，使用选择器来定位表格单元格边框。
Styling a sudoku grid 的可能重复项

标签： html css

【解决方案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 ;
}

【讨论】：

【解决方案2】：

看看这个答案 https://stackoverflow.com/a/19699482/1897572

并在此处查看结果http://jsfiddle.net/plinuxke/j6t5c/

<style>
table { border-collapse: collapse; font-family: Calibri, sans-serif; }
colgroup, tbody { border: solid medium; }
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</style>
<table>
  <caption>Sudoku of the day</caption>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <tbody>
   <tr> <td>1 <td>  <td>3 <td>6 <td>  <td>4 <td>7 <td>  <td>9
   <tr> <td>  <td>2 <td>  <td>  <td>9 <td>  <td>  <td>1 <td>
   <tr> <td>7 <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>6
  <tbody>
   <tr> <td>2 <td>  <td>4 <td>  <td>3 <td>  <td>9 <td>  <td>8
   <tr> <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>  <td>
   <tr> <td>5 <td>  <td>  <td>9 <td>  <td>7 <td>  <td>  <td>1
  <tbody>
   <tr> <td>6 <td>  <td>  <td>  <td>5 <td>  <td>  <td>  <td>2
   <tr> <td>  <td>  <td>  <td>  <td>7 <td>  <td>  <td>  <td>
   <tr> <td>9 <td>  <td>  <td>8 <td>  <td>2 <td>  <td>  <td>5
</table>

【讨论】：

【解决方案3】：

首先你需要将浮动逻辑移动到单元格类，而不是输入，并且你需要将显示属性设置为块，内联块有无样式的边距，这在这种情况下一点也不方便

.cell{
  display: block;
  float: left;
  width: 40px;
  height: 40px;
}

然后你可以使用 :nth-child(3n+1) 在每三个元素之后清除浮动

.cell:nth-child(3n+1){
  clear:both;
}

.cell input {
  text-align: center;
  font-size: 30px;
  width:40px;
  height:40px;
  display:block;
  border: 1px solid black;
}

http://jsfiddle.net/jcferrans/G5U8s/1/

希望对你有帮助！

【讨论】：

感谢您的帮助。

【解决方案4】：

这是另一种方式：

<style>

    input {
        aspect-ratio: 1;
        text-align: center;
    }

    #sudoku-grid {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
    }

</style>

【讨论】：