Invisible tables with CSS

[Philipp K]

Hi,

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...

table
{
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?

 

[David Dorward]

<table border="0" cellspacing="0" cellpadding="0">
When i try it with CSS...
table { 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?

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.

 

[Steve Pugh]

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...

table
{
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?

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;

So,
<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.

cheers,
Steve