[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