Solved

CSS Cell-Spacing

Posted on 2004-04-08
8
74,569 Views
Last Modified: 2011-08-18
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
Comment
Question by:Mike737
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 17

Expert Comment

by:dorward
ID: 10789583
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
 
LVL 1

Expert Comment

by:thurston_l
ID: 10789654
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
 
LVL 19

Accepted Solution

by:
webwoman earned 50 total points
ID: 10805091
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!

 
LVL 17

Expert Comment

by:dorward
ID: 10811408
Magin actually worked? On table cells? I'm unable to reproduce this, what browsers are you testing on?
0
 
LVL 8

Expert Comment

by:adg080898
ID: 11322694
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
 
LVL 1

Author Comment

by:Mike737
ID: 11330377
I actually used what webwoman said.

margin-left:0px;
margin-top:0px;
margin-right:1px;
margin-bottom:1px;
0
 

Expert Comment

by:zyph
ID: 12927253
You can actually reduce those four lines to a simple one liner:
margin: 0 1px 0 0;

(Top, right, bottom, left)
0
 
LVL 2

Expert Comment

by:jay_s5
ID: 14711434
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

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question