CSSを使ってチックタックつま先ボードとしてテーブルをスタイル設定する

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に2番目のクラスを追加し、そのクラスだけに罫線を付けます。

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のトップにはborder-top：noneがあります。左にはborder-leftがあります。正方形には常にすべての境界があります。