Question

我已经用纯HTML和CSS完成了棋盘。但由于我不是设计师，我无法弄清楚如何做一件简单的事情。我试图在电路板周围做一个框架。我使用CSS border属性在table.chessboard元素中创建了一个边距（下面的代码）。但是这个边际在董事会内扩大并减少了边界上的方格。

我该怎么做才能解决这个问题？

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我假设您想在所有单元格周围建立边框。

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>

Answer 2

在你的css中：

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

根据需要调整宽度;）

绘制棋盘与框架与纯html和CSS

2 个答案: