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

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

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

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

    Tables and CSS

    Mark Rae, Jul 16, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    2,117
    Mark Rae
    Jul 17, 2004
  2. Christopher R

    Tables and CSS

    Christopher R, Jun 26, 2003, in forum: HTML
    Replies:
    1
    Views:
    930
    David Dorward
    Jun 26, 2003
  3. Peter Bassett
    Replies:
    3
    Views:
    1,158
    Augustus
    Aug 15, 2003
  4. Otuatail

    Tables within tables

    Otuatail, Jul 31, 2004, in forum: HTML
    Replies:
    7
    Views:
    738
  5. RobM
    Replies:
    3
    Views:
    613
  6. Chris Brat
    Replies:
    5
    Views:
    923
    =?iso-8859-1?q?Luis_M._Gonz=E1lez?=
    Aug 22, 2006
  7. Andy B
    Replies:
    5
    Views:
    834
    Andy B
    May 29, 2008
  8. itsastickup
    Replies:
    7
    Views:
    2,070
    Ari Heino
    Mar 22, 2009
Loading...