Invisible tables with CSS

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have the following problem: without CSS i would write this for an
invisible table which doesnt require any space.

<table border="0" cellspacing="0" cellpadding="0">

When i try it with CSS...

    border-width: 0px;
    padding: 0px;
    border-spacing: 0px;

... the tables width is bigger than a table with my non CSS version.

Any ideas what i have done wrong?

Re: Invisible tables with CSS

Philipp K wrote:
Quoted text here. Click to load it

You made the borders between cells touch, but you didn't collapse them (see
the border-collapse property), and you removed the padding from the table
(which doesn't have padding) but not the cells inside that table.

David Dorward                              /

Re: Invisible tables with CSS

Quoted text here. Click to load it

cellpadding is the padding inside the cells, so
td, th {padding: 0}
would be the equivalent.

IE doesn't support border-spacing, but
border-collapse: collapse
causes the same display as border-spacing: 0;

<table border="0" cellspacing="0" cellpadding="0">

can be replaced by

table {border: none; border-collapse: collapse; border-spacing: 0;}
td, th {padding: 0;}

If you have non-zero cellspacing then it's best to stick with the HTML
until IE catches up with the rest of the universe.


"My theories appal you, my heresies outrage you,
 I never answer letters and you don't like my tie."  - The Doctor

Site Timeline