orbisuser
asked on
Freeze row within the same table
Hi,
I'm trying to freeze the first row within the table. I've found many solutions, however, they all request 2 different tables be used; which creates a problem in my case where the table widths are not lined up.
And I'm not using .net.
Any help appreciated. Thanks.
I'm trying to freeze the first row within the table. I've found many solutions, however, they all request 2 different tables be used; which creates a problem in my case where the table widths are not lined up.
And I'm not using .net.
Any help appreciated. Thanks.
ASKER
I want the first row of the table to be in place while scrolling down the page.
Hmm. Within the same table? I don't think that is possible. After all, a table row should not move while other rows of the same table
do not move at all.
Stick around for another opinion though. I am still pretty new to this.
Joe P
do not move at all.
Stick around for another opinion though. I am still pretty new to this.
Joe P
In regular HTML, XHTML, etc., it is not possible to freeze the first row of a table while looking through the rest of the table. However, you do have some options:
1) Use frames or iframes, put the first row of the table in a table in the top frame, and scroll the rest of the table in the bottom frame. I assume this is similar to the solution you're talking about where your table widths don't line up. You can specify the widths of each table element specifically, though, to ensure that your table widths DO line up. Set the overflow: clip attribute for all table cells so they won't be tempted to stretch to accomodate data, but will instead conform to your width specifications. Also, make sure the frame borders are set to 0.
2) I imagine that with some creative CSS and a little JavaScript, you might be able to manage a floating table kind of effect. Maybe where the first row uses <th></th> to delimit table cells, while the rest of the rows use <td></td>. Then set the position: relative; attribute for the td tag, position: relative for the th tags, z-index: 0 for the td tags, z-index: 1 for the rest of the page, and use JavaScript to move them when an event notification function is triggered? I've never done it, but it might be feasible.
1) Use frames or iframes, put the first row of the table in a table in the top frame, and scroll the rest of the table in the bottom frame. I assume this is similar to the solution you're talking about where your table widths don't line up. You can specify the widths of each table element specifically, though, to ensure that your table widths DO line up. Set the overflow: clip attribute for all table cells so they won't be tempted to stretch to accomodate data, but will instead conform to your width specifications. Also, make sure the frame borders are set to 0.
2) I imagine that with some creative CSS and a little JavaScript, you might be able to manage a floating table kind of effect. Maybe where the first row uses <th></th> to delimit table cells, while the rest of the rows use <td></td>. Then set the position: relative; attribute for the td tag, position: relative for the th tags, z-index: 0 for the td tags, z-index: 1 for the rest of the page, and use JavaScript to move them when an event notification function is triggered? I've never done it, but it might be feasible.
> 2) I imagine that with some creative CSS and a little JavaScript, you
> might be able to manage a floating table kind of effect.
This is definatly possible.
Joe P
> might be able to manage a floating table kind of effect.
This is definatly possible.
Joe P
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Doh! Of course, you can just specify the height manually and it deals with the overflow by adding a scroll bar! Why didn't I think of that?
Of course, some clients don't handle the height attribute well in CSS, so some JavaScript might have to be added to deal with that. I'm sure whoever put it together thought of that already, though.
Very cool. <bookmark>
Of course, some clients don't handle the height attribute well in CSS, so some JavaScript might have to be added to deal with that. I'm sure whoever put it together thought of that already, though.
Very cool. <bookmark>
What do you mean by freeze the first row?
Joe P