在 HTML table 中隐藏单元格边框

Question

我想删除 HTML table 的单元格边框，但保留 "outside" 边框。

这样一个默认的HTMLtable会这样创建：

但我想要这样的布局：

我该怎么做？

Answer 1

唯一的方法是通过 css。将所有边框重置为 0 像素，然后使用不同的 class 您可以覆盖它并仅在特定单元格

上显示所需的边框

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

以此类推

Answer 2

您可以使用 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中看到动作fiddlehere

在 HTML table 中隐藏单元格边框

Hide cell border in HTML table

html

css

html-table

border

cell