Solved

CSS Cell-Spacing

Posted on 2004-04-08
8
74,559 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
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

810 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