Forum Moderators: not2easy

Message Too Old, No Replies

overflow hidden is not functioning

         

angel777

6:47 am on Oct 6, 2008 (gmt 0)

10+ Year Member



hi.. i would like to modify the layout / CSS so that the Title are remained on the screen even after scrolling the data.
However, my situation is like this:

i have 4 buttons on my page A. Each time the button is clicked, it will load different function&design onto that page A container as below.

.table_content {
position: absolute;
padding-right: 0px;
left: 5px;
top: 328px;
width: 1200px;
height: 45%;
background-color: transparent;
overflow: auto;
}

Problem here..

i want the overflow:auto to be appeared only for the 1st to 3rd button when it is clicked but not on the 4th button.
when the 4th button is clicked, i would like the container to have the Title to be remained on the screen even after scrolling the data.

** so the best way is to get rid of that overflow: auto;

i tried something like this ... but failed... pls help

<div style="overflow: hidden;">// Intend to get rid of the scrollbar
<!-- header table -->
<div style="overflow: hidden;">
<table>
<tr>
<td>week x</td>
<td>week y</td>
</tr>
<tr>
<td>cost a</td>
<td>cost b</td>
</tr>
</table>
</div>
<!-- data table -->
<div style="overflow: scroll;">
<table>
<tr>
<td> data 1</td>
<td> data 2</td>
</tr>
</table>
</div>
</div>

swa66

1:14 am on Oct 7, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to webmaster world angel777.

I honestly don't understand the question. Esp. the part about 4 buttons eludes me

CSS:

.table_content {...}
matches up with html that has an attribute of
class="table_content"
, yet I see no such mention in the code you posted.

It appears as if you want to have a header in a table and a scrolling body of the table underneath (something software like spreadsheets can do easily). I'm afraid support for that kind of thing is still a bit too far for most browsers. I'd love to be proven wrong though.

I tried a bit ago to have the tbody just do "overflow:scroll", but it failed miserably in just about any browser I tried, so I gave up.

Even if you step away from tables and do the layout differently, there are a few fundamentally tricky bits in getting it to work as you'll need to guess how wide a scrollbar is. Something you can't really do I'm afraid.

But even then I don;t see where the buttons fit in.

Anyway, try to explain what you seek, perhaps it's not what I understood at all.