• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 74601
  • Last Modified:

CSS Cell-Spacing

I was wondering if cell-spacing is actually available in CSS?
I am currently using the following CSS code to display a table and the spacing between each cell seems to be 2px, not 1px as specified in the table attribute. Is there any other way besides forcing each table with the tables html cellspacing attribute, if cell-spacing does not work in CSS?

table
{
      margin: 0px;
      color: #0000CC;
      background-color:#6666FF;
                cell-spacing: 1px;
}

td
{
      background-color:#FFFFCC;
      color: #0000CC;
      font-size: 8pt;
      font-family: "Arial, Helvetica, sans-serif";
      padding: 2px;
}
0
Mike737
Asked:
Mike737
1 Solution
 
dorwardCommented:
table {
  border-spacing: 1px;
}

- Internet Explorer doesn't support it.

See border-collapse too (Internet Explorer does support border-collapse).

http://www.w3.org/TR/CSS2/tables.html#borders
0
 
thurston_lCommented:
css has a "border spacing" property, which applies to tables and inline tables. but i' read somewhere it's only possible to use, when you set an element border.
http://www.meyerweb.com/eric/css/tests/css2/sec17-06-01a.htm


0
 
webwomanCommented:
Have you tried using margin:1px? It should give you what you want.

Be aware, however, that you only want to set it on ONE side, otherwise you're going to efffectively have TWO px of space -- one on each side of the cell.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
dorwardCommented:
Magin actually worked? On table cells? I'm unable to reproduce this, what browsers are you testing on?
0
 
adg080898Commented:
I tried it too. I couldn't get Margin:1px to work either. I came here looking for the answer to the same question.

I got tired of trying to fix it with css, so I just put cellspacing="0" on the table tag and was done with it!
0
 
Mike737Author Commented:
I actually used what webwoman said.

margin-left:0px;
margin-top:0px;
margin-right:1px;
margin-bottom:1px;
0
 
zyphCommented:
You can actually reduce those four lines to a simple one liner:
margin: 0 1px 0 0;

(Top, right, bottom, left)
0
 
jay_s5Commented:
I couldn't get any of the answers above to work for me; however, I found this table-level method with the 'border-collapse' value that works in both IE 6.x and Firefox:

table {
     border-collapse: collapse;
}

Then I set the border for td's to 'none' and added some padding to space the table rows out a bit so they didn't look crowded:

td {
     border-style: none;
     padding: 3px 2px 3px 2px;
}

I hope it helps.

Isn't this CSS stuff a mess with different browsers?
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now