Prev: div a:hover IE 6.0
Next: Inline css tags: need to add link color and hover over behavior
From: dfdavis.mtu on 3 Jan 2007 09:26
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><th> or <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.parentNode.scrollLeft); /*
IE5+ only */
position: relative;
z-index: 10;
}

From: toffee on 7 Jan 2007 18:31
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

<dfdavis.mtu(a)gmail.com> wrote in message
news:1167834359.858671.286810(a)42g2000cwt.googlegroups.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><th> or <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.parentNode.scrollLeft); /*
> IE5+ only */
> position: relative;
> z-index: 10;
> }
>


From: dfdavis.mtu on 10 Jan 2007 09:15
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
>
> <dfdavis.mtu(a)gmail.com> wrote in message
> news:1167834359.858671.286810(a)42g2000cwt.googlegroups.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><th> or <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.parentNode.scrollLeft); /*
> > IE5+ only */
> > position: relative;
> > z-index: 10;
> > }
> >

 | 
Pages: 1
Prev: div a:hover IE 6.0
Next: Inline css tags: need to add link color and hover over behavior