CODEWITHSUNDEEP
htmlcss
Caco
Caco

Reputation: 1654

Draw chessboard with frame with pure html and css

I have already finished a chessboard with pure HTML and CSS. But as I'm not a designer, and I can't figure out how to do a simple thing. I'm trying to make a frame around the board. I'm using CSS border property to make a margin in table.chessboard element (code below). But that margin expands inside the board and decreases the squares on borders.

What can I do to solve this?

Code:

table.chessboard {
  margin: 80px auto;
  background: #999;
  border: 25px solid #333;
}

td.chessboard {
  width: 70px;
  height: 70px;
}

tr.chessboard:nth-child(odd) td.chessboard:nth-child(even),
tr.chessboard:nth-child(even) td.chessboard:nth-child(odd) {
  background: white;
}
<table class="chessboard">
  <tr class="chessboard">
    <td class="chessboard"></td>
    <!-- line above 8 times -->
  </tr>
  <tr class="chessboard">
    <td class="chessboard"></td>
    <!-- line above 8 times -->
  </tr>
  <tr class="chessboard">
    <td class="chessboard"></td>
    <!-- line above 8 times -->
  </tr>
  <tr class="chessboard">
    <td class="chessboard"></td>
    <!-- line above 8 times -->
  </tr>
  <tr class="chessboard">
    <td class="chessboard"></td>
    <!-- line above 8 times -->
  </tr>
  <tr class="chessboard">
    <td class="chessboard"></td>
    <!-- line above 8 times -->
  </tr>
  <tr class="chessboard">
    <td class="chessboard"></td>
    <!-- line above 8 times -->
  </tr>
  <tr class="chessboard">
    <td class="chessboard"></td>
    <!-- line above 8 times -->
  </tr>
</table>

Upvotes: 3

Views: 10383

Answers (3)

sk11
sk11

Reputation: 1

<!DOCTYPE html>
<html>
    <head>
        <title>Chessboard using HTML and CSS</title>
        <style>
            .cboard-box {
                border: 1px solid #000;
                width: 560px;
                height: 560px;
            }
            .cboard-row {
                display: flex;
                flex-wrap: wrap;
            }
            .cboard-cell {
                width: 70px;
                height: 70px;
            }
            .cboard-row:nth-child(odd) .cboard-cell:nth-child(odd) {
                background: #fff;
            }
            .cboard-row:nth-child(odd) .cboard-cell:nth-child(even) {
                background: #000;
            }
            .cboard-row:nth-child(even) .cboard-cell:nth-child(even) {
                background: #fff;
            }
            .cboard-row:nth-child(even) .cboard-cell:nth-child(odd) {
                background: #000;
            }
        </style>
    </head>
    <body>
        <div class="cboard-box">
            <div class="cboard-row">
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
            </div>
            <div class="cboard-row">
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
            </div>
            <div class="cboard-row">
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
            </div>
            <div class="cboard-row">
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
            </div>
            <div class="cboard-row">
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
            </div>
            <div class="cboard-row">
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
            </div>
            <div class="cboard-row">
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
            </div>
            <div class="cboard-row">
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
                <div class="cboard-cell"></div>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

HolyMoly
HolyMoly

Reputation: 2080

in your css:

table.chessboard { 
   border: 2px solid #000;
}

adjust width as desired ;)

Upvotes: 0

pol
pol

Reputation: 2701

I assume you want to make a border around all the cells.

table.chessboard {
    margin: 80px auto;
    background: #999;
    border: 25px solid #333;
    border-collapse: collapse; /* */
}
td.chessboard {
    width: 70px; height: 70px;
    border: 2px solid #333; /* */
}
tr.chessboard:nth-child(odd) td.chessboard:nth-child(even),
tr.chessboard:nth-child(even) td.chessboard:nth-child(odd) {
    background: white;
}
<table class="chessboard">
<tr class="chessboard">
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
</tr>
<tr class="chessboard">
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
</tr>
<tr class="chessboard">
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
</tr>
<tr class="chessboard">
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
</tr>
<tr class="chessboard">
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
</tr>
<tr class="chessboard">
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
</tr>
<tr class="chessboard">
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
</tr>
<tr class="chessboard">
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
    <td class="chessboard"></td>
</tr>
</table>

Upvotes: 6

Related Questions