Solved

CSS Cell-Spacing

Posted on 2004-04-08
8
74,545 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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

758 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now