Tables as rectangular screen areas

dfloss · Sep 15, 2006

This is bad form, but it works. Is there a better way to border-ize a
rectangle of unknown size?

<html>
<body>
<div>
<table style="margin-left: auto; margin-right: auto; border-bottom:
2px solid; border-color: #999" cellspacing="0" cellpadding="0">
<tr style="font-size: x-large; font-weight: bold"><td>Here is some
text</td></tr>
<tr style="font-size: xx-small"><td> </td></tr>
</table>
</div>
</body>
</html>

.... insert spacers as needed

dorayme · Sep 15, 2006

dfloss said:
This is bad form, but it works. Is there a better way to border-ize a
rectangle of unknown size?

<html>
<body>
<div>
<table style="margin-left: auto; margin-right: auto; border-bottom:
2px solid; border-color: #999" cellspacing="0" cellpadding="0">
<tr style="font-size: x-large; font-weight: bold"><td>Here is some
text</td></tr>
<tr style="font-size: xx-small"><td> </td></tr>
</table>
</div>
</body>
</html>

... insert spacers as needed

Perhaps you are having trouble styling a div the way you want
because a div is by default 100% wide, even if the content is
not. The div does not naturally shrink to the width of the
content. To make it do so, one method is to estimate the width of
the content - if it is text, em based width is pretty good - and
then assign similar to a width specification to the div (with
appropriate allowances like padding, perhaps a bit to spare etc).

<div style="margin-left: auto; margin-right: auto; border-bottom:
2px #999 solid;width:9em;">
Here is some text
</div>

Harlan Messinger · Sep 15, 2006

dorayme said:
Perhaps you are having trouble styling a div the way you want
because a div is by default 100% wide, even if the content is
not. The div does not naturally shrink to the width of the
content. To make it do so, one method is to estimate the width of
the content - if it is text, em based width is pretty good - and
then assign similar to a width specification to the div (with
appropriate allowances like padding, perhaps a bit to spare etc).

Or if the goal is to have it look as though it occupies a particular
proportion of the window's width, use a percentage:

width: 50%;

Can anyone please help? HTML - two tables applying different styles	4	Dec 1, 2020
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Image shifts to the right when export the page to pdf	4	May 5, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
How to have two html audio players on one page?	0	May 3, 2022
I need help fixing my website	2	Oct 15, 2023
HTML Table Issue	1	Aug 29, 2022

Tables as rectangular screen areas

dfloss

dorayme

Harlan Messinger

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads