Cell spacing prob in CSS

Having trouble spacing out my cells using CSS. I am using a table layout in HTML for a page, that page referencing an external CSS stylesheet.

I want my 3 columns (which contain my content) to have some space between each other, so you can see some of the background image between them as the user scrolls down.

I just don't get the border-spacing tag - it doesn't seem to work for me. I'm obviously doing something completely wrong here:

table.tablestyle {width:100%}

td.leftcol {background-color:#FFFFCC; padding: 0.5cm; border-spacing: 45px}

td.rightcol {background-color:#FFFFCC; padding: 0.5cm}

td.centercol {background-color:#CCFFCC; padding: 0.5cm}


I'm experimenting on the left column, but nothing's happening. The colours work ok, so the HTML is referencing the classes fine. I've put in borders and tried many things, but to no avail. Please help an idiot boy.

I'm dire with tables, always been dead complex... but... you know the 45px spacing will be added to ALL sides of that cell

Code: Select all

 border-spacing: 0 45px 0 0;

Would just add it to the right side. (the values go clock wise... or like a compass Top, Right, Bottom, Left)

Oh also what browser are you using? aaaaand have you got a link so we can see?

This flagged up Not supported by IE on a google search.

Hmm. Whatever I try doesn't work at all. I think I need to sit down with my fat HTML/CSS book and read up on tables in CSS - there's obviously a major gap in my knowledge. Maybe tables can't do what I want. I just want some space between the cells to you can see the fixed background as you scroll - but no. It's purely cosmetic, so not vital.

Perhaps you can't see through parts of a table, which is what I need to be able to do.


Oh well.