Geek Answers Handbook

How to remove split between rows in HTML table?

I have an html table with 3 rows and 1 column. At the top and row buttons, I have images, and in the middle row I have a div.

Between my lines I see a separation (I see the background of my page). I tried to set all paddings and fields to zero (for tables, divs and images), and I still have this separation. Please help me solve this problem.

+7
html html-table padding margin image
source share
6 answers

Set cellspacing=0 to the <table> , as well as cellpadding=0 .

+7
source share

Try using 'border-collapse':

 table { border-collapse: collapse; }
+15
source share

Use this in the img tag:

 display: block;
+5
source share

Gonzohunter stuck this, ok, but it might be easier for you to just set the style in the table, assuming you're in the latest version of HTML.

I used

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

It worked perfectly.

+3
source share

It seems to be your H2 that causes it. To fix this, set the top edge to zero:

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

You need to eliminate the spacing between the table cells.

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>
0
source share

More articles:


All Articles