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

Question

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

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

Answer 1

尝试使用“边框折叠”：

table {
  border-collapse: collapse;
}

Answer 2

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

Answer 3

在 img 标签中使用它：

display: block;

Answer 4

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

我用过

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

这个效果很好。

Answer 5

看来是你的 H2 造成的。要修复它，请将其上边距设置为零：

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

Answer 6

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

在 CSS 中：

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

或者在 HTML 4.01/XHTML 1.0 DTD（严格或过渡） 中：

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