PDA

View Full Version : Table inside a box

pinkotoad
07-26-2002, 08:06 AM
Here is my problem:
I have a box with a "margin: 40px 180px 25px". I have a table inside that that box. There are two columns, the first column is jusified to the left, the second to the right. I want the table to use 100% of the box (minus the padding of course).
I'm not sure if it is sleep deprivation or what, I just can't seem to figure this out.

<div id="contentHolder">
<div id="Content">
<table border="0">
<tr>
<td align="left">Example</td>
<td align="right">Example</td>
</tr>
</table>
</div>
</div>

#contentHolder {margin:40px 180px 25px;}
#Content {padding: 10px; border: solid black 0px 1px 1px 1px;
background-color: #D7D7D7;}

Thanks in advance
Spookster
07-26-2002, 08:36 AM
An easier and cross browser way of creating an outlined box with tables is to nest two tables like so:



<table cellspacing=0 cellpadding=1 width=168 bgcolor=#000000 border=0>
<tr>
<td>
<table cellspacing=0 cellpadding=5 width="100%" bgcolor=#ffffff border=0>
<tr>
<td bgcolor=#FFFFFF height=9 align="left">Left Side</td>
<td bgcolor=#FFFFFF height=9 align="right">Right Side</td>
</tr>
</table>
</td>
</tr>
</table>



Give the outside table a cellpadding of 1 or however thick you want the border. Then change the color of the outside table to the color you want the border to be.
Spookster
07-26-2002, 08:40 AM
You can even get creative and give the boxes headers either with text or using graphics:



<table cellspacing=0 cellpadding=1 width=168 bgcolor=#000000 border=0>
<tr>
<td class=header01_white bgcolor=#003366><font color="#FFFFFF">Box Header</font></td>
</tr>
<tr>
<td>
<table cellspacing=0 cellpadding=5 width="100%" bgcolor=#ffffff border=0>
<tr>
<td valign=top bgcolor=#FFFFFF height=9>Here is the content of your box</td>
</tr>
</table>
</td>
</tr>
</table>



And of course this works in all browsers.
welo
07-29-2002, 12:13 PM
Interesting situation. Your 180px horizontal margins won't allow the table placed in the div to be set to 100%, because the table stretches to the width of the window regardless, and your div still has 180px margins. I played with it for awhile and the best I came up with was to size the table. For an 800px window, a table width of 420px is about right:

#contentholder { background-color: #d7d7d7; margin: 40px 180px 25px; padding: 10px; border: solid 0px black }

<div id="contentholder">
<table border="0" width="420">
<tr>
<td align="left">Example</td>
<td align="right">Example</td>
</tr>
</table>
</div>

And you could always <center> the table for higher res users, though of course, javascripting the table width to adjust with the window size can also be done (which looks like more trouble than it's worth - lots of calculating).

I'd go with Spook's suggestion and just disregard the <div>s.
MCookie
07-29-2002, 04:13 PM
Some browsers, like IE 5 Win, don't like empty divs. For them, you should put something in them, like a spacer div or break.
Both codes (one without a table) below work fine in Mozilla, Opera, IE5 on Mac.

<html><head>
<title>Untitled</title>
<style type="text/css">
<!--
#contentHolder {margin:40px 180px 25px;border:1px solid #00f;}
#Content {padding:10px;border:1px solid #c00;background-color:#ccc;}
#table {width:100%;border:1px solid #690;}
#table .left {width:50%;text-align:left;background-color:#f6f;}
#table .right {width:50%;text-align:right;}

#contentHolder2 {margin:40px 180px 25px;border:1px solid #00f;}
#Content2 {padding:10px;border:1px solid #c00;background-color:#ccc;}
#table2 {width:100%;border:1px solid #690;}
#table2 .leftcontent {float:left;width:49%;text-align:left;}
#table2 .rightcontent {float:left;width:49%;text-align:right;}

br {clear:both;font-size:1px;}
-->
</style>
</head>
<body>
<div id="contentHolder"><br />
<div id="Content">
<table id="table">
<tr>
<td class="left">Example on the left...</td>
<td class="right">...thgir eht no elpmaxE</td>
</tr>
</table>
</div><br />
</div>

<div id="contentHolder2"><br />
<div id="Content2"><br />
<div id="table2"><br />
<span class="leftcontent">Example on the left...</span>
<span class="rightcontent">...thgir eht no elpmaxE</span><br />
</div><br />
</div><br />
</div>

</body>
</html>
MCookie
07-30-2002, 12:11 AM
Putting a table in a DIV and setting it's width to 100% makes Win IE 5.5 think entire window width instead of the width of the DIV. It's a bug.
But there's a workaround, using another bug...
Found it here: http://www.webreference.com/authoring/style/sheets/layout/advanced/
Scroll down to "Summary of CSS Workarounds"
welo
07-30-2002, 12:19 AM
That's a pretty good link, MCookie. I'm on IE6/W2K and still encounter the situation they (and you) describe. I'm digesting their workaround.
pinkotoad
07-30-2002, 04:14 PM
Thanks! Just what I was looking for.
MCookie
07-30-2002, 04:28 PM
Also, check out this link: www.tantek.com/CSS/Examples/boxmodelhack.html
A workaround for the wrong rendered margins, paddings and borders in IE5 and IE5+.