如何使用HTML和CSS做一个数独网格？ [英] How to make a sudoku grid using HTML and CSS?

问题描述

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

已编辑（使用表格）：

 < table id =gridborder =1style =border-collapse：collapse;> 
< tr class =row> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
 
<！ -  row  - >< / tr> 
 ---------------------------------------------- ----------- 
 ----------------------------------- ---------------------- 
 
< tr class =row> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td& 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
< td class =cell>< input type =textmaxlength =1>< / td> 
<！ -  row  - >< / tr> 
< / table> 
  

文档的CSS / p>

  #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输入{
 display：inline-block; 
 float：left; 
 
 border：1px solid black; 
 width：40px; 
 height：40px; 
 
 text-align：center; 
 font-size：30px; 
} 
  

但我无法使每第三列和第三行加粗， 3 * 3细胞块明显地出现。任何人都可以指导我？提前感谢。

解决方案

您可以使用：nth-​​child（n）选择器以加强您的部分边框： DEMO

---

与表，您可以使用这些CSS规则：

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

Excuse me for this simple question. I have designed a sudoku grid in the following way.

Edited(Using Tables):

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

But I am unable to make every third column and third row thick so that each 3 * 3 cell block appears distinctly. Can anyone guide me? Thanks in advance.

解决方案

You can use :nth-child(n) selector to thicker some of your borders : DEMO

---

as for a table , you can use these CSS rules :

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

这篇关于如何使用HTML和CSS做一个数独网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！