problem with background and table inside a styled box

J

Jedrin

I have a problem which I have reduced down into the example below.
Basically there is a div with a background color and a large table
that stretches far to the right of the browser window. I would like
the background color to go all the way to the end of the table,
however it will either only go to the end of the browser window or to
some width I specify and either go too far beyond the table or not far
enough. Is there a way I can do this or can I determine what the table
width is in javascript and then set the div width ?

I can't just set the table to the same background color as the div.
The reason is that in the actual problem, although they actually do
have the same background, but the larger body/page has black
backgorund and the div is styled to look like a box that the table is
enclosed in. If the table goes outside the box, then it looks funny.


=========================================


<style type='text/css'>
#my_area {
background: blue;
width: 2000px;
}
</style>

<div id='my_area'>
my area
<table>

<tr>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

</tr>

<tr>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


</tr>

<tr>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

</tr>

<tr>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

</tr>

<tr>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>


<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>


<td> hhh 11 </td>

<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>


<td> zztw xx 99 </td>

<td> peny pen pal </td>

<td> zz </td>

<td> hhh 11 </td>

<td> zztw xx 99 </td>


<td> peny pen pal </td>

</tr>


</table>

</div>
 
J

John Hosking

I have a problem which I have reduced down
Click to expand...

Great! Good work. Thanks for helping us help you. Etc.
into the example below.
Click to expand...

Awww. :-(
Basically there is a div with a background color and a large table
that stretches far to the right of the browser window. I would like
the background color to go all the way to the end of the table,
however it will either only go to the end of the browser window or to
some width I specify and either go too far beyond the table or not far
enough. Is there a way I can do this or can I determine what the table
width is in javascript and then set the div width ?
Click to expand...

JS? Please no. Mine's turned off. In any case, the width of the table will
probably just change when the visitor resizes the text.
I can't just set the table to the same background color as the div.
The reason is that in the actual problem, although they actually do
have the same background, but the larger body/page has black
backgorund and the div is styled to look like a box that the table is
enclosed in. If the table goes outside the box, then it looks funny.
Click to expand...

S'ok. Sounds funny.

And I think a table as wide as you've provided in your example won't ever
appear to be entirely inside the box anyway, since few folks have a browser
open wide enough to see the whole table at once in the first place. Makes a
fellow wonder what's in this (real) table, and how a visitor's supposed to
use it.
<style type='text/css'>
#my_area {
background: blue;
width: 2000px;
}
</style>
Click to expand...

[Interminably long HTML table snipped]

Well, I'm still just an apprentice, but I sometimes make notes when I read
these groups, and Ben C (frequent contributor in c.i.w.a.stylesheets) has
mentioned a few times that "only some block boxes start 'block formatting
contexts': floats, table cells, positioned things, overflow not visible."

I think you need your containing div to establish a block formatting
context so that the table will be visually contained within it. That'll
give you an automatic enveloping of the table no matter what its rendered
size.

Of course, being a novice, I could be entirely wrong about this. Test
vociferously. I tried this only in some FF2 I've got here.

Oh, and what did I try? I made the div a float, or I positioned it
(separately).

position:absolute;
float:left;

With your simple example, which I copied and pasted at some extra expense
of time (next time please post a URL), it doesn't much matter whether the
div is floated or positioned. In your actual page, it'll depend on the rest
of your content.

GL. HTH.
 
J

Jan C. Faerber

 I have a problem which I have reduced down into the example below.
Basically there is a div with a background color and a large table
that stretches far to the right of the browser window. I would like
the background color to go all the way to the end of the table,
however it will either only go to the end of the browser window or to
some width I specify and either go too far beyond the table or not far
enough. Is there a way I can do this or can I determine what the table
width is in javascript and then set the div width ?
Click to expand...

Not tested yet:

<Script language=javascript>
function test()
{
d = document.getElementById("my_area");
e = document.getElementById("my_table");
d.style.width = e.offsetWidth;
}
</script>

<body onLoad=test()>
<style type='text/css'>
#my_area {
background: blue;
}
</style>

<div id="my_area">
my area
<table id='my_table'>
<tr>
 
N

Neredbojias

I have a problem which I have reduced down into the example below.
Basically there is a div with a background color and a large table
that stretches far to the right of the browser window. I would like
the background color to go all the way to the end of the table,
however it will either only go to the end of the browser window or to
some width I specify and either go too far beyond the table or not
far enough. Is there a way I can do this or can I determine what the
table width is in javascript and then set the div width ?

I can't just set the table to the same background color as the div.
The reason is that in the actual problem, although they actually do
have the same background, but the larger body/page has black
backgorund and the div is styled to look like a box that the table is
enclosed in. If the table goes outside the box, then it looks funny.
Click to expand...

Can you use css borders on the table itself to create the box effect?
 

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

Similar Threads

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
Filter table rows based on multiple checkboxes value 2
Having trouble centering contents of td ? 3
Help needed with thank you message 5
Angularjs newbie - second JSON datasource does not display 0
How to have two html audio players on one page? 0
TABLE with sticky header row and scrollable body rows 8
two tier grid inside of a table 0

Members online

Total: 59 (members: 1, guests: 58)
Robots: 307

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,822
Latest member
israfaceZa

Latest Threads

Top