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

Question

我有一个 table 结构如下所示，它是一个灰色背景的在线页面。我遇到的问题是删除单元格边框。

<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>

这就是它的样子，无论我尝试了什么，例如将 .no-border class border:0; 添加到 <tr> 或添加内联 css到 <td>。结果还是这样...

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

Answer 1

您需要像这样删除单元格间距：

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>

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

How can I remove the border around all the cells in a table?

html

css

css-tables