Question

我打算用jQuery和PHP编写一个tic tac toe游戏。我想用CSS设置主板（一个html表）的样式。我不知道可以有选择地应用于单元格的CSS属性，以便特定单元格获得边框。我可以使用任何CSS属性，还是应该尝试不同的方法？

html标记是：

  <div id="board">
    <table>
      <tr id="row1">
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
      </tr>
      <tr id="row2">
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
      </tr>
      <tr id="row3">
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
      </tr>
    </table>
  </div>

Answer 1

好吧，为某些TD添加第二个类，并仅为该类提供边框。

HTML和CSS：

.square{
    width:100px;
    height:100px;
}

.v{
    border-left:1px solid #000;
    border-right:1px solid #000;
}

.h{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}

<div id="board">
    <table>
      <tr id="row1">
        <td class="square"></td>
        <td class="square v"></td>
        <td class="square"></td>
      </tr>
      <tr id="row2">
        <td class="square h"></td>
        <td class="square v h"></td>
        <td class="square h"></td>
      </tr>
      <tr id="row3">
        <td class="square"></td>
        <td class="square v"></td>
        <td class="square"></td>
      </tr>
    </table>
  </div>

Answer 2

假设您希望中间方格有黑色边框，只需执行此操作：

.middle {
border: 1px solid #000000;
}
<td class="middle"></td.>

Answer 3

除了中间正方形之外，您必须为每个td提供多个类。例如，变化的第一个td，将具有“top”和“left”类，并且在你的css top中将有border-top：none;左边会有border-left：none;和方将永远有所有边界。

使用CSS将桌子设计为tic tac toe board

3 个答案: