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

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>