CSS, Tables and Borders

This post deals with an issue that can arise if you are trying to render a table in HTML in which you have varying numbers of cells per row.

Ideally all rows should have the same number of cells, but sometimes that would involve ugly code in order to pad out the html. The browsers can handle the case so why not let them?

But a problem arises when you want to draw a border around the whole table. For this you would add this sort of style to your table tag:
table {
border: 1px solid #000;
border-collapse: collapse;
}

This works fine in Firefox on Mac OS X, but in Safari the border is not drawn for any 'missing' cells.

You can fix this by adding a tbody tag and giving it the attribute
tbody {
display: block;
}

This acts to define that table as a rectangular 'block' of pixels, as opposed to some irregular shape, and then it draws the border around that - that's my interpretation of it anyway.

You can get the border by setting the display attribute in the table tag and removing the tbody tag but the size of the table may be different. In general you want to use tbody tags, for this reason and in order for ajax/dom manipulation reasons.

And always, always test your pages out on all the main browsers before deploying!