Is there something we can do like table[cellspacing=x] that allows us to control the td margin with the variable x?

I ask this because in my setup, I am using a reset stylesheet that has a definition:

table {
   border-collapse:separate;
   border-spacing:2px;
   ...
}

This works fine until the we encounter a line in the html as such:

<table cellspacing=5>

...

Basically, I want to be able to define the behavior for cellspacing in my reset stylesheet...

Is this possible with CSS?

---

Update:

Well, actually, let me be more clear about my problem:

I am working with a templated system that uses a reset style on the bottom.

Any random user can come along and create HTML content on top of that, possibly containing a table something like this:

<table cellspacing=7>

I want to override the default styling behavior of all browsers with my own styling behavior, when it comes to handling the cellspacing attribute of the table element.

The number passed to the cellspacing attribute will be unknown to me, as the system is dynamic.

I need to be able to control the behavior of cellspacing using CSS in the reset stylesheet to accomplish this, or else whatever some end-user types in for cellspacing in their hypothetical table will be overridden by this line in my reset stylesheet:

table {
   bo开发者_StackOverflowrder-collapse:separate;
   border-spacing:2px;
   ...
}

So, I need a statement that will work with whatever value the end-user passes to the cellspacing attribute.

I'd imagine this statement looks something like:

table[cellspacing=x] > td {
   ...
}

Such that I can use the variable x in the body of this CSS definition.

You see, I can't just use a static value like 3, or 5, or 10 for cellspacing because the value the user puts in will be unknown to me when I am making my reset stylesheet. They can put in whatever they want, but it will always use the same reset stylesheet.

Is this possible?

---

You can do:

table[cellspacing="5"] {
    border-spacing: 30px;
}

See: http://jsfiddle.net/k2Qpt/

This uses the attribute selector.

---

I don't think thirtydot understand the question... the code should be:

table.spaced td {
    padding:5px;
}

if you want only tables with the class spaced to have cellspacing.

if you want every table to have cellspacing:

table td {
    padding:5px;
}

Here's a jsFiddle of it: http://jsfiddle.net/ben7005/3w4EU/

---

Regarding your update:

I've had a thorough think about this. What would be nice is if you could do:

table[cellspacing] {
    border-spacing: auto;
}

That would override your border-spacing: 2px. But, this won't work because there is no auto or normal value that you can set border-spacing to :(

If you only need to support modern browsers, you can use:

table:not([cellspacing]) {
    border-spacing: 20px;
}

See: http://jsfiddle.net/7YUYs/

That will only select tables that don't have cellspacing set.

Browser support for the :not selector is reasonable, except that it doesn't work in IE until version 9:

https://developer.mozilla.org/En/CSS/:not

To make it work in older versions of IE, you could use: http://selectivizr.com/

If that's not an option, I think the only choice that doesn't require using JavaScript is to do this:

table {
    border-spacing: 2px
}

table[cellspacing="0"] { border-spacing: 0 }
table[cellspacing="1"] { border-spacing: 1px }
table[cellspacing="2"] { border-spacing: 2px }
table[cellspacing="3"] { border-spacing: 3px }
..

See: http://jsfiddle.net/UJasP/

All tables will have border-spacing: 2px, but any tables with cellspacing set will have border-spacing set to the correct value. You should go as high with the numbers as you think you need to - the size of your CSS file is not a problem.

---

You can use padding properties to accomplish this from css.

table td {
    padding-bottom:10px;
    padding-right:25px;
}

The above will put cell spacing of 25px on the right side of each cell and 10px on the bottom of each cell. I literally did this today in my own project :)