表與自定義邊框

我試圖做類似如下的表：表與自定義邊框

enter image description here

這裏是我的代碼：

<table bordercolor="#000000"> 
    <tr> 
     <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;"> 
      Player1 Status 
     </th> 
     <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;"> 
      Player2 Status 
     </th> 
     <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;"> 
      Player3 Status 
     </th> 
     <th width="200" style="border-bottom: 2px dashed;"> 
      Player4 Status 
     </th> 
    </tr> 
    <tr> 
     <td width="200" style="border-right: 2px dashed;">Your Trun!</td> 
     <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td> 
     <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td> 
     <td width="200">Not Your Turn!</td> 
    </tr> 
    <tr> 
     <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td> 
     <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td> 
     <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td> 
     <td width="200">Remaining Moves: 5</td> 
    </tr> 
</table>

但是，消除Your Trun!，當我面臨的一個問題聲明中，表格將如下所示：

enter image description here

我該如何解決這個問題？

來源

2011-08-15 Eng.Fouad

您可能想看看使用CSS類這使它更容易一些改變，你應該想。 – Chris

只需使用 ：

<table bordercolor="#000000"> 
    <tr> 
     <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;"> 
      Player1 Status 
     </th> 
     <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;"> 
      Player2 Status 
     </th> 
     <th width="200" style="border-right: 2px dashed; border-bottom: 2px dashed;"> 
      Player3 Status 
     </th> 
     <th width="200" style="border-bottom: 2px dashed;"> 
      Player4 Status 
     </th> 
    </tr> 
    <tr> 
     <td width="200" style="border-right: 2px dashed;">&nbsp;</td> 
     <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td> 
     <td width="200" style="border-right: 2px dashed;">Not Your Turn!</td> 
     <td width="200">Not Your Turn!</td> 
    </tr> 
    <tr> 
     <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td> 
     <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td> 
     <td width="200" style="border-right: 2px dashed;">Remaining Moves: 5</td> 
     <td width="200">Remaining Moves: 5</td> 
    </tr> 
</table>

的jsfiddle：http://jsfiddle.net/Vgk2W/

來源

2011-08-15 13:21:16 stealthyninja

之所以這樣做，是因爲有些瀏覽器將空表格單元看作不在那裏，因此不要繪製其邊框。把html空間實體強制它正確繪製表格。 – Chris

CSS屬性「空細胞：秀;」在更現代的瀏覽器也可以正常工作
測試：http://jsfiddle.net/Vgk2W/1/
支持：http://www.quirksmode.org/css/tables.html

來源

2011-08-15 13:24:51 anderssonola

表與自定義邊框

回答

相關問題