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

Question

I have a html table with 3 rows and 1 column. In the top and button row I have images and in the middle row I have div.

Between my rows I see a separation (I see background of my page). I tried to set all padding and margins to zero (for tables, div and images) and I still have this separation. Can anybody, please, help me to solve this problem.

Answer 1

Try using 'border-collapse':

table {
  border-collapse: collapse;
}

Answer 2

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

Answer 3

在img标签中使用它：

display: block;

Answer 4

Gonzohunter nailed this, alright, but you may find it easier to just set the style on the table, assuming you are in a recent HTML version.

I used

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

This worked perfectly.

Answer 5

It seems that it's your H2 that's causing it. To fix it, set the top margin of it to zero:

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

Answer 6

You need to eliminate spacing from the table cells themselves.

In CSS:

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

Or in HTML 4.01/XHTML 1.0 DTD (Strict or Transitional) :

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