• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Scrollable Table using DIV in IE7 not working as expected

 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Sheriff
Posts: 67749
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
UseCodeTags
 
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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

BLANK_SPACE.JPG
[Thumbnail for BLANK_SPACE.JPG]
With Blank Space
NO_BLANK_SPACE.JPG
[Thumbnail for NO_BLANK_SPACE.JPG]
With out Blank Space
 
Bear Bibeault
Sheriff
Posts: 67749
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
reply
    Bookmark Topic Watch Topic
  • New Topic