隐藏 HTML 表格中的单元格边框答案

【问题标题】：Hide cell border in HTML table隐藏 HTML 表格中的单元格边框
【发布时间】：2015-05-28 17:30:36
【问题描述】：

我想删除 HTML 表格的单元格边框，但保留“外部”边框。

这样一个默认的 HTML 表格会这样创建：

但我想要这样的布局：

我该怎么做？

【问题讨论】：

标签： html css html-table border cell

【解决方案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 fiddlehere看到动作

【讨论】：

【解决方案2】：

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

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

等等

【讨论】：