Cellspacing in CSS - Solved!

HTML & CSS
1

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

2

The only thing that i see that would be an issue in IE is the :last-child pseudo selector as its supported only by IE 9 and up.

3

Why wouldn’t you use the border-spacing property from §17.6.1 The separated borders model?

cheers,

gary

4

Because browser support for it is a joke? It’s one of the few times I say screw it and still declare cellspacing in my HTML… though it does help with CSS off appearance so no harm no foul. Really funny is the biggest offender in not supporting it historically has been gecko. (much like inline-block or COL)… while 4.x FINALLY fixed this issue (I think… maybe… not sure…) a lot of *nix builds still are on the old engine, so I’m not quite ready to start deploying border-spacing just yet.

I get the feeling that in gecko the table handling code is this mysterious black box ported over from Nyetscape 4.x – given the speed at which issues with tables in browsers like FF get fixed. Right 915?

One ‘issue’ with this workaround – cellspacing also pushes them apart VERTICALLY, so you’d need top or bottom as well… and pushes it in from the edges, which is why I’d be doing:


table {
  border:solid #FFF;
  border-width:3px 0 0 3px;
}

table th,
table td {
  border:solid #FFF;
  border-width:0 3px 3px 0;
}

Though usually if I have cellspacing it’s because I want border on the cells – so this really isn’t much of a solution.

5

I don’t see a problem with it in the latest browsers from IE8 upwards. I tried an old gecko version (sea monkey 1.1.17 - which I believe is about FF2 equivalent) and it seemed to work fine there also. I didn’t do extensive testing so there may well be the odd issue in certain circumstances but as far as spacing the borders out in a standard table it seemed to work fine.

However as I still support IE7 I continue to use the cellspacing attribute for ease of use.

6

Hi Paul O’B,

Yes, it’s mainly a HTML5/CSS3 solution (although it might work in some older versions of some browsers), because until now there hasn’t really been a neat-ish solution. All I could find were half complete workarounds.

But once I sussed it after an extensive amount of trial and error, I felt I had to share my solution with everyone else who’s probably been tearing their hair out like me and ending up going back to the HTML cellspacing attribute.

It’s just a little give back to all the forums that I’ve used over the years, as a thank you for answering my questions.

Debbie

7

Hi, I was actually replying to Jasons comment about border-spacing.:slight_smile:

If you want to support modern browsers (Ie8+) only then border-spacing should do what you want because as mentioned earlier ie8 doesn’t support last-child.

We’d probably need to see your whole table code and what it looks like to test if the same look can be achieved with border-spacing only but from the sound of it it looks like it can.

Thanks for sharing your findings though as it makes an interesting discussion :slight_smile:

8

@Jason: I don’t understand your comment.

Because browser support for it is a joke?
As far as I can recall, and Paul seems to corroborate my oft failing memory, Gecko/Firefox et al were among the first to support this property (I verified for myself that FF3.5 supports border-spacing). IE has been the lone holdout in v.≤7. As to older IEs, I no longer care about making little things work for them, and only worry about the more egregious issues, and then not at all for v.≤6.

cheers,

gary