Set cellpadding and cellspacing in CSS?

Answer 1

This hack works for Internet Explorer 6 and later, Google Chrome, Firefox, and Opera:

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

The * declaration is for Internet Explorer 6 and 7, and other browsers will properly ignore it.

expression('separate', cellSpacing = '10px') returns 'separate', but both statements are run, as in JavaScript you can pass more arguments than expected and all of them will be evaluated.

Answer 2

For those who want a non-zero cellspacing value, the following CSS worked for me, but I'm only able to test it in Firefox.

See the Quirksmode link posted elsewhere for compatibility details. It seems it may not work with older Internet Explorer versions.

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

Answer 3

Simply use CSS padding rules with table data:

td { 
    padding: 20px;
}

And for border spacing:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

However, it can create problems in older version of browsers like Internet Explorer because of the diff implementation of the box model.

Answer 4

Also, if you want cellspacing="0", don't forget to add border-collapse: collapse in your table's stylesheet.

Answer 5

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

If margin didn't work, try to set display of tr to block and then margin will work.

Answer 6

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}