Cellspacing in CSS - Solved!

[Debbie-Leigh]

Hi,

At long last, I've managed to figure out how to emulate the HTML cellspacing attribute in CSS. So I thought that I'd post it here so everyone can use it.

Here's the code:

.cellspacing td {
	border-right : 3px solid #FFF;
}
.cellspacing td:last-child {
	border-right : 0px;
}
.cellspacing th {
	border-right : 3px solid #FFF;
}
.cellspacing th:last-child {
	border-right : 0px;
}

Just add the cellspacing class to a table tag and it creates a white 3px border between each column throughout the table.

It's a shame the CSS designers haven't made this easier by having a proper built-in cellspacing attribute, but until they do, this is the next best thing, I guess.

Enjoy.

Debbie

[bradgrafelman]

Debbie-Leigh;10985364 wrote:

it creates a white 3px border between each column throughout the table.

But what happens if the background of the surrounding element isn't white? Then you've got these nasty white lines all over the place.

Debbie-Leigh;10985364 wrote:

It's a shame the CSS designers haven't made this easier by having a proper built-in cellspacing attribute

Not really, mostly because "cellspacing" doesn't really exist. Instead, you should be using the padding or margin attributes to change either the internal spacing between a cell's contents and its container edge or the spacing between one cell's container and the next's, respectively.

EDIT: Woops, apparently that doesn't work (I could've sworn that's what I did years ago... hmm). Regardless, these StackOverflow pages have a better explanation that mine:

How to set cellpadding & cellspacing in CSS?
Why are cellspacing and cellpadding not CSS styles

[Debbie-Leigh]

Hi bradgrafelman,

I guess you would change the color to one of your choosing.

There may be other ways to achieve the same effect, but this is the one I've found that works, so I thought I'd share it, so others who have also been tearing their hair out don't have to anymore.

Debbie