I am planning to write a tic tac toe game with jQuery and PHP. I want to style the board (an html table) with CSS. I am not aware of CSS properties that can be applied to selectively to cells so that specific cells get borders. Are there any CSS properties that I can use or should I try a different approach instead?
The html markup is:
<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>
Well, add a second class to some TDs and give borders only to that class.
HTML and 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With