Standard internet table border with CSS

P

Paul Lautman

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
 
S

Spartanicus

Paul Lautman said:
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>
 
D

dorayme

Paul Lautman said:
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>
 
T

Toby Inkster

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

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

Spartanicus

Toby Inkster said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top