Invisible tables with CSS

Discussion in 'HTML' started by Philipp K, Nov 28, 2003.

  1. Philipp K

    Philipp K Guest

    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?
     
    Philipp K, Nov 28, 2003
    #1
    1. Advertising

  2. Philipp K wrote:
    > <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.

    --
    David Dorward http://dorward.me.uk/
     
    David Dorward, Nov 28, 2003
    #2
    1. Advertising

  3. Philipp K

    Steve Pugh Guest

    Philipp K <> wrote:

    >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

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

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Nov 28, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Peter Bassett
    Replies:
    3
    Views:
    968
    Augustus
    Aug 15, 2003
  2. Otuatail

    Tables within tables

    Otuatail, Jul 31, 2004, in forum: HTML
    Replies:
    7
    Views:
    521
  3. RobM
    Replies:
    3
    Views:
    534
  4. Andy B
    Replies:
    5
    Views:
    628
    Andy B
    May 29, 2008
  5. itsastickup
    Replies:
    7
    Views:
    1,862
    Ari Heino
    Mar 22, 2009
Loading...

Share This Page