469,133 Members | 1,404 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,133 developers. It's quick & easy.

Fixed Table Header causing slow scrolling

I have a table that I dynamically fill with data from a database for
medical companies to be able to determine if their patients meet
certain criteria. However they want a fixed header for it so they can
keep track of the criteria as they scroll since there can be upwards of
1000 or more patients in the table. The way I got this to work was to
enter the information in a table via C# by storing it in a label. This
works fine and scrolls fine without the fixed header, but when I added
the fixed header, everything slows down. There are checkboxes and
textboxes for them to enter information or check items, so maybe that
makes for the slow down with the fixed header, I'm not sure. I don't
know which code is needed to be seen in order to be helpful but I'll
post the css part I use to make the fixed header in IE (doesn't work in
Firefox) and the table part isn't really helpful since the information
is dynamic, just that I have the header always the same size and the
column widths predetermined. Otherwise it is just <tr><thor <td>
tags all within a <div>.

Thanks for any help.

div#tbl-container {
width: 100%;
height: 500px;
overflow: auto;
}

table {
width: 98.5%;
table-layout: fixed;
border-collapse: collapse;
}

thead th, thead th.locked {
position: relative;
cursor: default;
}

thead th {
top:
expression(document.getElementById("tbl-container").scrollTop-2); /*
IE5+ only */
z-index: 20;
}

thead th.locked {z-index: 30;}

td.locked, th.locked{
left:
expression(parentNode.parentNode.parentNode.parent Node.scrollLeft); /*
IE5+ only */
position: relative;
z-index: 10;
}

Jan 3 '07 #1
2 12620
if it gets too slow, i suggest using paging or even better but more
difficult is to use ajax to retrieve data as and when they scroll

<df*********@gmail.comwrote in message
news:11**********************@42g2000cwt.googlegro ups.com...
I have a table that I dynamically fill with data from a database for
medical companies to be able to determine if their patients meet
certain criteria. However they want a fixed header for it so they can
keep track of the criteria as they scroll since there can be upwards of
1000 or more patients in the table. The way I got this to work was to
enter the information in a table via C# by storing it in a label. This
works fine and scrolls fine without the fixed header, but when I added
the fixed header, everything slows down. There are checkboxes and
textboxes for them to enter information or check items, so maybe that
makes for the slow down with the fixed header, I'm not sure. I don't
know which code is needed to be seen in order to be helpful but I'll
post the css part I use to make the fixed header in IE (doesn't work in
Firefox) and the table part isn't really helpful since the information
is dynamic, just that I have the header always the same size and the
column widths predetermined. Otherwise it is just <tr><thor <td>
tags all within a <div>.

Thanks for any help.

div#tbl-container {
width: 100%;
height: 500px;
overflow: auto;
}

table {
width: 98.5%;
table-layout: fixed;
border-collapse: collapse;
}

thead th, thead th.locked {
position: relative;
cursor: default;
}

thead th {
top:
expression(document.getElementById("tbl-container").scrollTop-2); /*
IE5+ only */
z-index: 20;
}

thead th.locked {z-index: 30;}

td.locked, th.locked{
left:
expression(parentNode.parentNode.parentNode.parent Node.scrollLeft); /*
IE5+ only */
position: relative;
z-index: 10;
}

Jan 7 '07 #2
I have seen that suggestion before, but unfortunately I have no
experience in paging and all the examples I find are for datagrids,
which aren't quite what I am using. Any suggestions on how to do the
paging without using a datagrid, but rather a table, would be
appreciated.

Thanks,

Dan
toffee wrote:
if it gets too slow, i suggest using paging or even better but more
difficult is to use ajax to retrieve data as and when they scroll

<df*********@gmail.comwrote in message
news:11**********************@42g2000cwt.googlegro ups.com...
I have a table that I dynamically fill with data from a database for
medical companies to be able to determine if their patients meet
certain criteria. However they want a fixed header for it so they can
keep track of the criteria as they scroll since there can be upwards of
1000 or more patients in the table. The way I got this to work was to
enter the information in a table via C# by storing it in a label. This
works fine and scrolls fine without the fixed header, but when I added
the fixed header, everything slows down. There are checkboxes and
textboxes for them to enter information or check items, so maybe that
makes for the slow down with the fixed header, I'm not sure. I don't
know which code is needed to be seen in order to be helpful but I'll
post the css part I use to make the fixed header in IE (doesn't work in
Firefox) and the table part isn't really helpful since the information
is dynamic, just that I have the header always the same size and the
column widths predetermined. Otherwise it is just <tr><thor <td>
tags all within a <div>.

Thanks for any help.

div#tbl-container {
width: 100%;
height: 500px;
overflow: auto;
}

table {
width: 98.5%;
table-layout: fixed;
border-collapse: collapse;
}

thead th, thead th.locked {
position: relative;
cursor: default;
}

thead th {
top:
expression(document.getElementById("tbl-container").scrollTop-2); /*
IE5+ only */
z-index: 20;
}

thead th.locked {z-index: 30;}

td.locked, th.locked{
left:
expression(parentNode.parentNode.parentNode.parent Node.scrollLeft); /*
IE5+ only */
position: relative;
z-index: 10;
}
Jan 10 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by george1069 george1069 | last post: by
1 post views Thread by patelbrijeshn | last post: by
2 posts views Thread by vunet.us | last post: by
reply views Thread by sajithamol | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Mortomer39 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.