如何删除 HTML 表格中的行之间的分隔？

Posted 2023-03-05

【中文标题】如何删除 HTML 表格中的行之间的分隔？

【英文标题】：How do I remove separation between rows in a HTML table?

【发布时间】：2011-02-26 08:36:07

【问题描述】：

我有一个 3 行 1 列的 html 表。在顶部和按钮行我有图像，在中间行我有 div。

在我的行之间我看到一个分隔（我看到我的页面的背景）。我尝试将所有填充和边距设置为零（对于表格、div 和图像），但我仍然有这种分离。谁能帮我解决这个问题。

【参考方案1】：

在<table> 标记中设置cellspacing=0 以及cellpadding=0。

【讨论】：

你也在考虑 HTML 4 / CSS 1 / 1996。

他正在使用表格来格式化他的页面。那是 HTML4/CSS1/1996。因此，我的回答。

这个解决方案也不起作用。至于用表格格式化......他会正确使用 DIV，所以让我们让他放松一下。 :)

【参考方案2】：

在 img 标签中使用这个：

display: block;

【讨论】：

万岁！解决了我的问题！

【参考方案3】：

Gonzohunter 解决了这个问题，好吧，但假设您使用的是最新的 HTML 版本，您可能会发现在桌面上设置样式会更容易。

我用过

<table style='border-collapse: collapse;'>
    ... 
</table>

这非常有效。

【参考方案4】：

似乎是你的 H2 导致了它。要修复它，请将其上边距设置为零：

<h2 style="margin-top: 0;"><span class="text">Welcome to the Colored Trails Game Page!</span></h2>

【参考方案5】：

您需要消除表格单元格本身的间距。

在 CSS 中：

<style type="text/css">
  td 
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
  
</style>

或者在HTML 4.01/XHTML 1.0 DTD (Strict or Transitional)：

<table cellspacing="0" cellpadding="0">
  [...]
</table>

【参考方案6】：

尝试使用'border-collapse'：

table 
  border-collapse: collapse;

【讨论】：

有人让它工作吗？我试过了，但对我没有任何作用。