Welcome to WebmasterWorld Guest from 54.145.235.23

Forum Moderators: not2easy

Message Too Old, No Replies

Box model question: collapsing margin between table cells

extra space in nested table cells, CSS

     
6:49 am on Jan 20, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 9, 2003
posts:118
votes: 0


I'm missing something pretty fundamental about the CSS box model. The following generates whitespace between the outer edge of the two green table cells, and the red border of the table:

<table style="border: 5px solid red; margin: 0px; padding: 0px;">
<tr>
<td style="border: 5px solid green;
margin: 0px; padding: 0px;">Text</td>
</tr>
<tr>
<td style="border: 5px solid green;
margin: 0px; padding: 0px;">Text</td>
</tr>
</table>

What exactly is this space? The padding of the red table border? The margin of the green table cells?

I can make it "go away" with "border-collapse: collapse;" but that feels like a hack that would require extensive browser testing. Can someone help set me straight?

8:30 am on Jan 20, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 16, 2007
posts:914
votes: 0


You're gonna love this...
add cellspacing="0" to the table element.
10:02 am on Jan 20, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 9, 2003
posts: 118
votes: 0


Ick. So much for modern standards-based design ;-). But it did appear to work... at least on today's browser.
1:07 pm on Jan 20, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


border-collapse:collapse should be doing what you want here, and it works fine in nearly all browsers (including IE5+).

If you want the equivalent of cellspacing="1" or greater then you’d need to use a combination of border-collapse:separate and border-spacing:x, but that unfortunately doesn’t work in IE. Not an issue for your current problem though.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members