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>

文档的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单元块明显出现。谁能指导我？提前谢谢。

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

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

Answer 3

首先，您需要将浮动逻辑移动到单元类，而不是输入，并且需要将display属性设置为block，内联块具有不可翻转的边距，在这种情况下根本不方便

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

希望它有所帮助！

Answer 4

这是另一种方式：

<style>

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

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

</style>

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

4 个答案: