100% Panel Width Problem

[ATR2000]

I have setup a Panel to have a width of 100% so that it will adjust to users
screensize. Within the panel I have a table. Unfortunately the table holds
a lot of data and exceeds the size of the screen. The panel has a height of
350px and the scrollbar is set to auto so that both scrollbars appear when
needed. What is happening is that due to the table exceeding the width of
the screen the panel is also enlarging its width larger than the screen and
matching that of the table. I want the panel to stay at the 100% width of
the screen and then if the table exceeds the width then the horizontal
scrollbar appears on the panel.

I know horizontal scrollbars are a bad idea. Unfortunately, I don't have a
choice. :-(

Any ideas? Thanx in advance.

ATR2000

 

[ATR2000]

Ok, here is some more information that I discovered.

When the DIV statement is within a table like the following, it fails:

<table>
<tr>
<td>
<div style="overflow: auto; width: 100%; height: 350px;
background: #00FF00; position: relative; white-space:nowrap;">
<div>
<table>
<tr>
ETC...

If I place the DIV tag at the root of the BODY tag then it works fine.

Any thoughts as to why it does that? I need to have this content reside
within a table due to design layout.

ATR2000

 

[ATR2000]

I figured it out. Once I implemented the following style within the table
tag it worked.

<table style="overflow:hidden; table-layout:fixed; position:relative;
width:100%;">
<tr>
<td>
<div style="overflow: auto; width: 100%; height: 350px;
background: #00FF00; position: relative; white-space:nowrap;">
<div>
<table>
<tr>
ETC...

Thanx,

ATR2000