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" <so*****@microsoft.comwrote in message
news:ea**************@TK2MSFTNGP05.phx.gbl...

>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]

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
"ATR2000" <so*****@microsoft.comwrote in message
news:O$**************@TK2MSFTNGP04.phx.gbl...

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" <so*****@microsoft.comwrote in message
news:ea**************@TK2MSFTNGP05.phx.gbl...

>>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