用CSS表格作爲一個tic tac腳趾板

我打算用jQuery和php編寫一個tic tac腳趾遊戲。我想用CSS來設計這個板子（一個html表格）。我不知道可以選擇性應用於單元格的CSS屬性，以便特定單元格獲得邊框。有沒有我可以使用的CSS屬性，或者我應該嘗試一種不同的方法。用CSS表格作爲一個tic tac腳趾板

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

來源

2011-07-21 nikhil

那麼，爲某些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>

來源

2011-07-21 16:51:28

這在jsFiddle和Safari/Chrome中完美呈現，但不在Firefox或IE中，是否有一些解決方案？僅供參考我正在運行IE9和Firefox 5。 – nikhil

說你想要的廣場中間有一個黑色的邊框，簡單地做到這一點：

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

來源

2011-07-21 16:48:42

哦，忘了提，如果你想保留的類方形，簡單的做到這一點： '' –

你將不得不給多個班每個TD，除了中間的廣場。例如，例如，第一個td不同，會有類'top'和'left'，並且在您的css頂部會有border-top：none;左邊會留下邊界：無;廣場將永遠擁有所有的邊界。

來源

2011-07-21 16:49:57 Luke

忘了提及，你會保留每個td的方形課程。 – Luke

用CSS表格作爲一個tic tac腳趾板

回答

相關問題