homepage Welcome to WebmasterWorld Guest from 54.234.2.94
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Box model question: collapsing margin between table cells
extra space in nested table cells, CSS
brycen




msg:3225744
 6:49 am on Jan 20, 2007 (gmt 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?

 

cameraman




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

You're gonna love this...
add cellspacing="0" to the table element.

brycen




msg:3225812
 10:02 am on Jan 20, 2007 (gmt 0)

Ick. So much for modern standards-based design ;-). But it did appear to work... at least on today's browser.

Robin_reala




msg:3225891
 1:07 pm on Jan 20, 2007 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved