Welcome to WebmasterWorld Guest from 54.144.243.34

Forum Moderators: not2easy

Box model question: collapsing margin between table cells

extra space in nested table cells, CSS

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

10+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



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

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month