Tech or Treat! Write an article about your scariest tech disaster to win gadgets!Learn more

x
?
Solved

CSS Cell-Spacing

Posted on 2004-04-08
8
Medium Priority
?
74,592 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 150 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

647 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