Standard internet table border with CSS

Discussion in 'HTML' started by Paul Lautman, Mar 26, 2006.

  1. Paul Lautman

    Paul Lautman Guest

    Is it possible to mimic the look of the simple table below using CSS
    settings and if so how?

    <TABLE WIDTH="20px" CELLPADDING="2" CELLSPACING="0" BORDER="2" >
    <tr><td>fred</td></tr>
    </table>

    TIA
    Regards
    Paul
    Paul Lautman, Mar 26, 2006
    #1
    1. Advertising

  2. Paul Lautman

    Spartanicus Guest

    "Paul Lautman" <> wrote:

    >Is it possible to mimic the look of the simple table below using CSS
    >settings and if so how?
    >
    ><TABLE WIDTH="20px" CELLPADDING="2" CELLSPACING="0" BORDER="2" >
    ><tr><td>fred</td></tr>
    ></table>


    Kind of.

    There are two things to emulate:

    1) The line break before & after, and shrink to fit behaviour
    2) The border look

    To emulate the line break before & after, and shrink to fit behaviour:

    First choice is specifying display:table, but this is not supported by
    IE.

    Second best is display:inline-block, but only IE supports that well
    enough to be usable, and it doesn't emulate the line break before and
    after display model, but this can be solved with a block level wrapper.

    Least best is floating (spit), but this is supported well enough cross
    browser, it requires clearing afterwards.

    Emulating the border look is only partially possible since browsers tend
    to draw the colours of HTML table borders in a more sophisticated manner
    than is the case with CSS borders.

    Pragmatically probably the best cross browser code:

    span{float:left;border-width:2px;border-style:eek:utset}
    span span{border-width:1px;border-style:inset;padding:2px}
    div div{clear:both;height:1px;font:0\0}

    <div>
    <span><span>fred</span></span>
    <div></div>
    </div>

    --
    Spartanicus
    Spartanicus, Mar 26, 2006
    #2
    1. Advertising

  3. Paul Lautman

    dorayme Guest

    In article <>,
    "Paul Lautman" <> wrote:

    > Is it possible to mimic the look of the simple table below using CSS
    > settings and if so how?
    >
    > <TABLE WIDTH="20px" CELLPADDING="2" CELLSPACING="0" BORDER="2" >
    > <tr><td>fred</td></tr>
    > </table>


    An approximation would be;

    <div style="width:2em;padding:2px;border:3px solid
    #666">fred</div>

    --
    dorayme
    dorayme, Mar 27, 2006
    #3
  4. Paul Lautman

    Toby Inkster Guest

    Spartanicus wrote:

    > Second best is display:inline-block, but only IE supports that well
    > enough to be usable,


    Opera 7+ has good support for inline-block.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Mar 27, 2006
    #4
  5. Paul Lautman

    Spartanicus Guest

    Toby Inkster <> wrote:

    >> Second best is display:inline-block, but only IE supports that well
    >> enough to be usable,

    >
    >Opera 7+ has good support for inline-block.


    Alas, no. Opera 7+ supports inline-block, but it's to buggy for this
    purpose. The relevant bug wasn't solved until the v9 preview releases.

    --
    Spartanicus
    Spartanicus, Mar 27, 2006
    #5
    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. tshad
    Replies:
    0
    Views:
    2,228
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,319
    Martin Jay
    Jun 8, 2006
  3. Coder
    Replies:
    1
    Views:
    672
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    border-color: #003366; border-width: 2px;

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    3,458
    Adrienne Boswell
    Jul 30, 2006
  5. Replies:
    3
    Views:
    882
    richard
    Sep 24, 2006
Loading...

Share This Page