如何删除表格中所有单元格周围的边框？

Question

我有一个像下面这样的表格，它是一个灰色背景的页面。我遇到的问题是删除单元格边框。

<table width="510">
<tbody>
<tr>
<td style="background-color: #fff;" colspan="2" width="510"></td>
</tr>
<tr>
<td style="background-color: #fff;"></td>
<tdstyle="background-color: #fff;"></td>
</tr>
<tr>
<td style="background-color: #fff;"></td>
<td style="background-color: #fff;"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>

无论我尝试过什么，例如向border:0;添加.no-border类<tr>或向<td>添加内联css，这就是它的样子。它仍然像这样......

如何删除所有单元格周围的边框？

Answer 1

您需要删除cellspacing，如下所示：

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

这相当于cellspacing="0" HTML属性。见这个例子：

body {
  background: grey;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}

<table width="510">
  <tbody>
    <tr>
      <td style="background-color: #fff;" colspan="2" width="510">t</td>
    </tr>
    <tr>
      <td style="background-color: #fff;">t</td>
      <td style="background-color: #fff;">t</td>
    </tr>
    <tr>
      <td style="background-color: #fff;">t</td>
      <td style="background-color: #fff;">t</td>
    </tr>
    <tr>
      <td colspan="2">t</td>
    </tr>
  </tbody>
</table>