Posted by Spartanicus on 11/24/70 11:43

"Paul Lautman" <paul.lautman@btinternet.com> 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:outset}
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

• Next in forum: Re: IE7 comments?
• Prev in forum: Font sizing again, was Re: Footer?
• Thread view: Re: Standard internet table border with CSS

[Reply to this message]