aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Scrollable Table using DIV in IE7 not working as expected Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Scrollable Table using DIV in IE7 not working as expected" Watch "Scrollable Table using DIV in IE7 not working as expected" New topic
Author

Scrollable Table using DIV in IE7 not working as expected

Mallesh Nidadavolu
Greenhorn

Joined: Feb 22, 2010
Posts: 2
Hi,

I am working on an intranet project, where I am building a scrallable table.
I googled the code for Scrollable table using the DIV container. We are using IE7 as the webbrowser.
When we search for the records from a database we are loading the table and adding a scroller to that.
But unfortunately, the Table some times getting placed where it is supposed to be and sometimes it is leaving a blank space and I have to scroll a lot to reach the scrollable table. I am adding the Style sheet and the table code below.

CSS Code:

div.tableHolder {
OVERFLOW: AUTO;
WIDTH: 95%;
POSITION: relative;
HEIGHT: 30%;
}

thead td{
Z-INDEX: 20;
POSITION: relative;
TOP: expression(this.offsetParent.scrollTop);
HEIGHT: 20px;
TEXT-ALIGN: center
}


HTML Code:

<div class="tableHolder" >
<table frame="border" Border="0" cellspacing="0" cellpadding="0" ALIGN="CENTER" ID="ORDER_RESULTS" >

<thead>
<tr >
<td width="11%">First Name</td>
<td width="11%">Last Name</td>
<td width="8%">Date of Birth</td>
<td width="4%">Sex</td>
<td width="9%">Test Code</td>
<td width="10%">Ordering Date</td>
</tr>
</thead>

<tbody>
<Data goes here>
</tbody>

</table>
</div>


I tried so many fixes and I didnt get success.
Any help would be appreciated to remove the blank space.

Thanks,
Mallesh
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61010
    
  65

UseCodeTags


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Suman Poluri
Greenhorn

Joined: Aug 04, 2009
Posts: 7
As Mr.Bear pointed out, please use code tags. It'll help people to help you. Also your question is a little vague. Do you want a table within a scrollable div or a scrollable table with a fixed header?

In case you want the former, just put the table in a div that has a fixed height and assign auto scroll to the div. When the table data exceeds the height of the div, you'll see a scroll bar.

In case you want the latter, you can use a separate table for the header and a separate table to hold the data. Put the second table in a div that has a fixed height and assign auto scroll to the div. That way you can scroll through the data and header is fixed.

Hope this helps!
Mallesh Nidadavolu
Greenhorn

Joined: Feb 22, 2010
Posts: 2
Mallesh Nidadavolu wrote:Hi,

I just added the code tags and and attached the screenshots too.. I got the scrolling work earlier itself. what exactly my problem is some times its creating a huge blank space before the scroll table.

I am working on an intranet project, where I am building a scrallable table.
I googled the code for Scrollable table using the DIV container. We are using IE7 as the webbrowser.
When we search for the records from a database we are loading the table and adding a scroller to that.
So, I got the fixed header and scrolling body.
But unfortunately, the Table some times getting placed where it is supposed to be and sometimes it is leaving a blank space and I have to scroll a lot to reach the scrollable table. I am adding the Style sheet and the table code below.

CSS Code:



HTML Code:



I tried so many fixes and I didnt get success.
Any help would be appreciated to remove the blank space.

Thanks,
Mallesh



[Thumbnail for BLANK_SPACE.JPG]


[Thumbnail for NO_BLANK_SPACE.JPG]

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61010
    
  65

Please properly indent your code. And don't use all uppercase for your CSS. It makes it hard to read and makes you look like a novice.
 
 
subject: Scrollable Table using DIV in IE7 not working as expected