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.
orbisuserAsked:
Who is Participating?
 
nltechConnect With a Mentor Commented:
scrollable table, fixed header. one table, no frames:
http://www.imaputz.com/cssStuff/bigFourVersion.html
0
 
BogoJokerCommented:
Hi orbisuser,

What do you mean by freeze the first row?

Joe P
0
 
orbisuserAuthor Commented:
I want the first row of the table to be in place while scrolling down the page.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
BogoJokerCommented:
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
0
 
smidgie82Commented:
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.
0
 
BogoJokerCommented:
> 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
0
 
smidgie82Commented:
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>
0
All Courses

From novice to tech pro — start learning today.