隱藏HTML表格中的單元格邊框

Question

我想刪除HTML表格的單元格邊框，但保留「外部」邊框。

這樣的默認HTML表將這樣創建：

不過，我想這樣的佈局：

我怎麼能這樣做？

Answer 1

您可以使用CSS來實現這一目標。請對下面的代碼

<table width="300" border="0" cellpadding="0" cellspacing="0" class="border" > 
<thead> 
<tr> 
    <td class="border-head">&nbsp;</td> 
    <td class="border-head">&nbsp;</td> 
    <td class="border-head" >&nbsp;</td> 
</tr> 
</thead> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
</table> 

的外觀和使用CSS像

<style> 
.border { 
    border:solid 1px #000; 
} 
.border-head { 
border-bottom:solid 1px #000; 
} 
</style> 

你可以看到在JS小提琴的動作here

Answer 2

唯一的辦法是通過CSS。 全部重設邊界0像素，然後用不同的類，你可以覆蓋它並僅顯示在特定的細胞所需邊界

table { 
border: 0px; 
} 
.bottom { 
border-bottom: 1px solid black; 
} 
.left { 
border-left: 1px solid black 
} 
.... 

等等