Fixed Table Header causing slow scrolling

[dfdavis.mtu]

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;
}

[toffee]

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;
}

[dfdavis.mtu]

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;
}