隐藏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 
} 
.... 

等等