This week's book giveaway is in the Other Languages forum.
We're giving away four copies of Functional Reactive Programming and have Stephen Blackheath and Anthony Jones on-line!
See this thread for details.
Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Scrollable Table using DIV in IE7 not working as expected

 
Mallesh Nidadavolu
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • 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
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65218
95
IntelliJ IDE Java jQuery Mac Mac OS X
 
Suman Poluri
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
  • 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
  • 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
Author and ninkuma
Marshal
Pie
Posts: 65218
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic