How to set cellpadding and cellspacing in CSS?
49
In  HTML, the table styles cellpadding and cellspacing can be set 

How would this be accomplished using CSS?
improve this question | comment
Russell Hane Created at: 2013-11-13 17:07:16 UTC By Russell Hane
14 Answers
0
In below link auther has explain how to handle Table cellpading and cellspacing with CSS

How to handle Table cellpading and cellspacing with CSS
0
The simple solution to this problem is: 

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

0
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

0
DEFAULT:



CELLSPACING:


  controls the space between table cells




CELLPADDING:


  sets the amount of space between the contents of the cell and the cell
  wall




BOTH:



BOTH SPECIAL:



Try it yourself!

Here you can find the old html way of achieving this.
0
Setting margins on table cells doesn't really have any effect as far as I know. The true CSS equivalent for cellspacing is border-spacing - but it doesn't work in Internet Explorer. 

You can use border-collapse: collapse to reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the cellspacing attribute.
0
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.
0
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. Seems it may not work with older Internet Explorer versions.

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

0
First of all, you can control cellspacing by applying the border-spacing CSS property to your table. This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7. For browsers which support it, this property will even allow separate horizontal and vertical spacing. If you need to support Internet Explorer 5, 6, or 7, you're almost out of luck. 

However, I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing:0;
    border-collapse:collapse;
}


Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.
0
Also, if you want cellspacing="0", don't forget to add border-collapse: collapse in your table's stylesheet.
0
TBH. For all the fannying around with CSS you might as well just use cellpadding="0" cellspacing="0" since they are not deprecated...

Anyone else suggesting margins on <td>'s obviously has not tried this.
0
Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap every cell in a column to get a uniform effect. For example, to just get wider left & right margins:

So the CSS will be,

div.cellwidener {
  margin:0px 15px 0px 15px;
}
td.tight {
  padding:0px;
}


And your HTML will be,

<table border="0">
  <tr>
     <td class="tight"><div class="cellwidener">My content</div></td>
  </tr>
</table>


Please refer code here

Yes, it's a hassle. Yes, it works with IE. In fact, I've only tested this with IE, because that's all we're allowed to use at work. 
0
From what I understand from the W3C classifications is that <table>s are meant for displaying data 'only'.

Based on that I found it a lot easier to create a <div> with the backgrounds and all that and have a table with data floating over it using position: absolute; and background: transparent;...

It works on Chrome, IE(6 and later) and Mozilla(2 and later).

Margins are used (or meant anyways) to create a spacer between container elements, like <table>, <div> and <form>, not <tr>, <td>, <span> or <input>. Using it for anything other than container elements will keep you busy adjusting your website for future browser updates.
0
Try this:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}


Or try this:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

0
I used !important after the border-collapse like

border-collapse: collapse !important;


and it works for me in IE7. It seems to override the cellspacing attribute.
Your Answer