Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts

    Lock Table Headers

    Is there a way to lock an html table header so that it doesn't scroll but the rest of the table does. Similar to excel when you lock a row?

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Have you tried using thead, tfoot and tbody, and set a explicit (preferably absolute) height on the tbody, together with an overflow: auto;?
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    I was just looking into somthing similar your suggestion will allow me to go a little deeper now. I'll try it. Thanks.

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, I'm not sure it'll work. The different table elements can behave weird sometimes, and the css spec is not clear about them at all times. It's just my "best shot" at how to work it out. If it doesn't work you can try it on the table element, putting the header and footer in separate tables before and after. It's not as elegant or correct a solution, but it might have better support.

    That's all speculation, though. Test the tbody/thead/tfoot elements first.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Doesn't seem to work. I see that it is easily done by using a seperate table as the header but my table is sortable so I need to do it with a single table.

    here is the code for the table sorry it is kind of messy.

    function makeTable()
    {

    window.pane.document.write('<style>.pink{background-colorink;width:350px;}.blue{background-color:lightblue;width:350px;}.yellow{background-color:yellow} table{text-align:center}</style><head><script language="javascript" src="sortTable1.js">' + ccc + '</head><body onLoad=initTable("table0");><center><br><br>You are viewing entries from the ' + f + ' folder.<table id="table0" border=1><thead style="position:absolute;height:5px;overflow:auto;"><tr><td>Name<td>Rep Frequency</a><td>MDN</a><td>MDN Frequency</a><td>Supervisor</a><td>Pin</a><td>Date</a><td>Time</a></td></tr></thead><tbody>');

    for(i=0;i<userlist.length;i++)
    {
    window.pane.document.writeln('<TR bgcolor="#FFFFFF" style="overflow:auto;"><td class="blue">' + userlist[i] + '</td><td class="pink">' + fullcountuser[i] + '</td><td class="blue">' + mdnlist[i] + '</td><td class="pink">' + fullcountmdn[i] + '</td><td class="blue">' + superlist[i] + '</td><td class="pink">' + pinnerlist[i] + '</td><td class="blue">' + whenlist[i] + '</td><td class="pink">' + timerlist[i] + '</td></tr>');
    }

    window.pane.document.writeln('</tbody></table></body>');msg.close();administrator(f,g);
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •