[thelist] Tip: Table cellspacing CSS

Jonathan_A_McPherson at rl.gov Jonathan_A_McPherson at rl.gov
Wed May 29 12:18:00 CDT 2002


<tip type="css" author="jeduthun">
I just spent way too long figuring this out and thought I'd share my
solution with the rest of you.

I'm trying to be a Good XHTML Programmer (tm) and use CSS to control
presentation instead of HTML attributes. I had a table (no, it's not a
layout table) that I wanted to have the equivalent of CELLSPACING="0" on,
and have a thin gray border under each cell.

So I did something like this:

	td, th {
		border-bottom:		1px solid #E0E0E0;
		border-left:		0px;
		border-right:		0px;
		padding:			0px;
		margin:			0px;
	}

This worked well, except I still had a very small (1 or 2 px) white line
between each table cell. (The 'border-left,' 'border-right,' 'padding,' and
'margin' items were an attempt to get rid of that). Nothing seemed to work.
I was sorely tempted to turn on CELLSPACING="0" to fix my problem (it did,
when I tried it), but I steadfastly refused to give in to temptation!

But then I remembered border-collapse!

	table {
		border-collapse:	collapse;
	}

This fixed things up quite nicely. Border-collapse essentially causes table
cells to share borders -- if you have a configuration like this:

cell1 cell2
cell3 cell4

then cell1's right border is the same as cell2's left border, cell2's bottom
border is the same as cell4's top border, and so forth.

Incidentally, border-collapse only works in later (5.x+) versions of IE (I
believe Mozilla/NS6 has had support for it for quite some time).
</tip>

Anyone know of a better CSS way to get rid of the unsightly white lines
without resorting to HTML?

Or a way that works in IE 4?

Jonathan.





More information about the thelist mailing list