How to make a sudoku grid using HTML and CSS?

Question

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.

@Diodeus I did it with tables too. But the problem is the same. Every row and column appears similarly. — user3034861
– user3034861, Commented May 6, 2014 at 14:27
You need to target the table cell borders with css, using selectors. — rnevius
– rnevius, Commented May 6, 2014 at 14:28

G-Cyrillus · Accepted Answer · 2014-05-06 14:35:04Z

14

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

answered May 6, 2014 at 14:35

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:04:00Z

Look at this answer https://stackoverflow.com/a/19699482/1897572

And check the result here 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>

javiercf · Accepted Answer · 2014-05-06 14:37:26Z

1

First of all you need to move the floating logic to the cell class, not the input, and you need to set the display property to block, inline blocks have unstyleble margins, which in this case are not convenient at all

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

Then you can use :nth-child(3n+1) to clear the floats after every third element

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

Hope it helps!

answered May 6, 2014 at 14:37

javiercf

8117 silver badges16 bronze badges

Comments

Mattias Inokuchi · Accepted Answer · 2021-05-31 13:50:23Z

1

Here is another way:

<style>

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

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

</style>

answered May 31, 2021 at 13:50

Mattias Inokuchi

2715 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to make a sudoku grid using HTML and CSS?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related