15

Am trying to use CSS3 to set the cell-spacing and the cell-padding for my table since HTML5 doesn't support these attributes.

I have found many resources on the internet says that you should use border-spacing and padding using CSS.

Unfo. i tried all these tricks , but it seems that no thing changing at all. The spacing is very important because am including image structure on the different cell of the table.

So how i can solve it now ? plz need your help 

#SearchTable
{
    border-collapse: collapse;
    padding:0px 0px 0px 0px;
}

#SearchTable td 
{
    padding:0;
    border-spacing:0px 0px; 
}
Hatem
  • 493
  • 2
  • 5
  • 12
  • it should work. Need the complete HTML markup and CSS to see why it's not working in your case. – Jawad Jan 21 '12 at 19:13
  • i remove every thing except the table and the problem still ! – Hatem Jan 21 '12 at 19:18
  • are you using the proper HTML 5 doctype? – ryankeairns Jan 21 '12 at 19:29
  • Note: In CSS, IDs are case sensitive: "#SearchTable" does not equal "#searchtable" Maybe you could make a [jsFiddle](http://jsfiddle.net/) to illustrate your problem. – Steve Wellens Jan 21 '12 at 20:08
  • I know that before , so the id is correct ! – Hatem Jan 21 '12 at 20:12
  • If you would make a jsFiddle, we wouldn't have to guess and waste your time. – Steve Wellens Jan 21 '12 at 22:38
  • possible duplicate of [In HTML5, with respect to tables, what replaces cellpadding, cellspacing, valign, and align?](http://stackoverflow.com/questions/6048913/in-html5-with-respect-to-tables-what-replaces-cellpadding-cellspacing-valign) – Peter O. May 26 '13 at 04:15
  • Any chance you could mark a correct answer - there does appear to be one here. – Matt Parkins Nov 05 '13 at 16:09
  • Here is more detailed answer: [In HTML5, with respect to tables, what replaces cellpadding, cellspacing, valign, and align?][1] [1]: http://stackoverflow.com/questions/6048913/in-html5-with-respect-to-tables-what-replaces-cellpadding-cellspacing-valign – Vladimir Jan 13 '14 at 15:40
  • Possible duplicate of [In HTML5, with respect to tables, what replaces cellpadding, cellspacing, valign, and align?](https://stackoverflow.com/questions/6048913/in-html5-with-respect-to-tables-what-replaces-cellpadding-cellspacing-valign) – Beth Lang Jun 20 '18 at 16:13

3 Answers3

23

For cellspacing:

  1. Set border-spacing on the table, not on the td.
  2. Set border-collapse to separate.
#SearchTable {
   border-collapse: separate;
   border-spacing: 8px; 
}
misterManSam
  • 24,303
  • 11
  • 69
  • 89
Matt Parkins
  • 24,208
  • 8
  • 50
  • 59
4

You have not set id=SearchTable on the table, or you have some other stylesheet rules that override those that you specify. As such, the rules you posted are more than sufficient for the effect; you only need

#SearchTable
{
    border-collapse: collapse;
}

#SearchTable td 
{
    padding:0;
}

(which are already in CSS2).

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Actually i put the those styles (only) and i had make sure about table id , so ? :( – Hatem Jan 21 '12 at 19:57
  • Then post your entire document or its URL, and specify which browser(s) you tested it on. (My guess is that you have images in the cells so that you are seeing image padding.) – Jukka K. Korpela Jan 21 '12 at 20:11
  • 2
    My guess was right, it is about image rendering and not cellspacing or cellpadding at all. The quickest fix is to add this: `img { display: block; }` – Jukka K. Korpela Jan 21 '12 at 21:00
1

You need to set it like this. It worked for me.

#SearchTable {
    border-spacing:2px 2px;
    border-collapse:separate;
}

#SearchTable td {
    border:1px solid black;
}
Luís Cruz
  • 14,780
  • 16
  • 68
  • 100
Binil
  • 107
  • 10