Fixed Table Header with horizontal and vertical scrollbars

spookykl · December 11, 2007

Hello,

I've been researching on this for a while, but has anyone come up with a good example of how to create a table with a fixed header (that stays on top), while scrolling vertically or horizontally?

That is, it must accomplish the following:

1. HTML table for public viewing - therefore must render sensibly in most (if not all) browsers.

2. Variable data length in the columns means that the table's column widths cannot be fixed - the browser should render the column widths dynamically according to the current data

3. Horizontal and vertical scrollbars should be shown on the table body if the view size is smaller than the table size

4. The table header row(s) should remain fixed and in view for vertical scrolling (MOST IMPORTANT)

5. The table header row(s) should scroll with the body rows for horizontal scrolling (MOST IMPORTANT)

Thank you for your help!

=)

EDIT: I am using HTML, JavaScript, PHP and connecting to a PostgreSQL database for my web development.

Psycho · December 11, 2007

A quick google search brought up several examples, here are a couple:

http://www.activewidgets.com/javascript.forum.9811.1/header-fixed-not-grid.html

http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

spookykl · December 19, 2007

Ok, after googling around, I came across some code and modified to suit my needs. (Please refer to my code below)

Ignoring the "GROUPS" column, I would like to create a table that does the following:

- Fixed table header when scrolling vertically (done)

- Fixed column when scrolling horizontally (done)

- Table header scrolls when scrolling horizontally (done)

- Fixed column scrolls when scrolling vertically (done)

now, here comes the tricky part that I can't seem to achieve.

- Be able to "click" on the checkbox, buttons (and whatever I will add in the future, eg: textbox) that are INSIDE the table.

(ie: If I want to edit Amanda's age, I should be able to click on the "edit" button and in the cell of Amanda's age, it will allow me to change her age.)

The problem with my implementation is, my DIV "scrollbar" has a z-Index greater than the DIV "container", which allowed me to create the fixed header with horizontal and vertical scroll feature. (but right now, at a cost.....cost of can't click on the buttons, etc.)

I am wondering if someone here knows what to do (add or modify), without losing the fixed header with scroll hor. & vert. feature.

Thanks for the help in advance!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
#corner {
            position:absolute;
            top:0px;
            left:0px;
            background-color:green;
            z-index:4;
            width:28px;
            height:25px;
        }
        #left_column {
            position:absolute;
            top:0px;
            left:0px;
            background-color:#99CCFF;
            margin-top:25px;
            width:120px;
            z-index:3;
        }
        #headers{
            overflow:hidden;
            background-color:#00CCFF;
            position:absolute;
            top:0px;
            left:0px;
            height:25px;
            margin-left:120px;
            z-index:3;
            white-space: nowrap;
        }
        #data{
            position:absolute;
            top:0px;
            left:0px;
            margin-left:120px;
            margin-top:25px;
            z-index:2;
            white-space: nowrap;
        }
        #container {
            position:absolute;
            top:45px;
		left:120px;
            width:75%;
            height:60%;
            border:1px solid #ffffff;
            overflow:hidden;
        }
        #scrollbar{
            position: absolute;
            overflow: auto;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            padding: 0px;
            z-index: 4;
        }
.wheelheader { 
    padding:5px;
    font-size:12px;
    background:#6060B3;
    color:#ffffff;
    font-weight:normal;
    border: 2px solid #000000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
.column0{width:20px;text-align:center;}
.column00{width:100px;text-align:center;}
        .column1{width:120px;text-align:center;}
        .column2{width:120px;text-align:center;}
        .column3{width:120px;text-align:center;}
        .column4{width:65px;text-align:center;}
        .column5{width:65px;text-align:center;}

.row0{height:25px;background-color:#00CCFF;text-align:center;}
        .row1{height:22px;text-align:center;}
        .row2{height:22px;text-align:center;}
        .row3{height:22px;text-align:center;}
        .row4{height:22px;text-align:center;}
        .row5{height:22px;text-align:center;}
</style>
<script>
        var data;
        var top;
        var left;
        var scrolled;
        var scrollbars;
        var container;
        var contentwidth;
        var contentheight;
        function init(){
            data=document.getElementById('data');
            top=document.getElementById('headers');
            left=document.getElementById('left_column')
            scrolled=document.getElementById('scrolled');
            scrollbars=document.getElementById('scrollbar');
            container=document.getElementById('container');
            contentheight=container.scrollHeight;
            contentwidth=container.scrollWidth;
            scrolled.style.height=contentheight+"px";
            scrolled.style.width=contentwidth+"px";
        }
        function scroll(){
            var x = scrollbars.scrollLeft;
            var y = scrollbars.scrollTop;
            data.style.left = "-"+x+"px";
            top.style.left="-"+x+"px";
            data.style.top = "-"+y+"px";
            left.style.top = "-"+y+"px";
        }
    </script>
</head>

<body bgcolor="#0066CC" onLoad="init()">

<div id="RTI" name="RTI" style="background-color:#E0E4E7; height:200px; width:599px; visibility:visible; top:40px; left:20px; position:absolute">

<h1 class="wheelheader" style="width:585px; top: -9px; position:absolute">Family Tree</h1>

<div style="background-color:#FFFFFF; width:100px; top:45px; left:20px; position:relative">
<table cellpadding="0" cellspacing="1" border="0">
<tr bgcolor="#00CCFF"><td width="100px">GROUPS</td></tr>
<tr bgcolor="#99CCFF"><td>Baby</td></tr>
<tr bgcolor="#99CCFF"><td>Children</td></tr>
<tr bgcolor="#99CCFF"><td>Adult</td></tr>
<tr bgcolor="#99CCFF"><td>Elder</td></tr>
</table>
</div>

<div id="container" >
    <div id="corner">
<table cellspacing="0" cellpadding="0" border="0"><tr class="row0">
        <td><div class="column0"><input type="checkbox" disabled="disabled"/><div></td>
        <td><div class="column00">Name<div></td>
        </tr></table>
</div>
    <div id="headers">
        <table cellspacing="0" cellpadding="0" border="0"><tr>
        <td><div class="column1">Age<div></td>
        <td><div class="column2">Sex<div></td>
        <td><div class="column3">Height<div></td>
        <td><div class="column4"><div></td>
        <td><div class="column5"><div></td>
        </tr></table>
    </div>
    <div id="left_column">
        <table cellspacing="0" cellpadding="0" border="0">
        <tr class="row1"><td><input type="checkbox" id="chkMe1" value="1"/></td><td>Bill</td></tr>
        <tr class="row2"><td><input type="checkbox" id="chkMe2" value="1"/></td><td>Mary</td></tr>
        <tr class="row3"><td><input type="checkbox" id="chkMe3" value="1"/></td><td>Todd</td></tr>
        <tr class="row4"><td><input type="checkbox" id="chkMe4" value="1"/></td><td>Amanda</td></tr>
        <tr class="row5"><td><input type="checkbox" id="chkMe5" value="1"/></td><td>Jaime</td></tr>
        </table>
    </div>

    <div id="data">
        <table cellspacing="0" cellpadding="0" border="0">
        <TR class="row1">
            <td><div class="column1">26</div></td>
            <td><div class="column2">Male</div></td>
            <td><div class="column3">6'0"</div></td>
            <td><div class="column4"><input type="button" value="Edit" /></div></td>
            <td><div class="column5"><input type="button" value="Delete" /></div></td>
        </TR>
        <TR class="row2">
            <td><div class="column1">30</div></td>
            <td><div class="column2">Female</div></td>
            <td><div class="column3">5'7"</div></td>
            <td><div class="column4"><input type="button" value="Edit" /></div></td>
            <td><div class="column5"><input type="button" value="Delete" /></div></td>
        </TR>
        <TR class="row3">
            <td><div class="column1">22</div></td>
            <td><div class="column2">Male</div></td>
            <td><div class="column3">5'8"</div></td>
            <td><div class="column4"><input type="button" value="Edit" /></div></td>
            <td><div class="column5"><input type="button" value="Delete" /></div></td>
        </TR>
        <TR class="row4">
            <td><div class="column1">25</div></td>
            <td><div class="column2">Female</div></td>
            <td><div class="column3">5'9"</div></td>
            <td><div class="column4"><input type="button" value="Edit" /></div></td>
            <td><div class="column5"><input type="button" value="Delete" /></div></td>
        </TR>
        <TR class="row5">
            <td><div class="column1">27</div></td>
            <td><div class="column2">Female</div></td>
            <td><div class="column3">5'6"</div></td>
            <td><div class="column4"><input type="button" value="Edit" /></div></td>
            <td><div class="column5"><input type="button" value="Delete" /></div></td>
        </TR>
        </table>
    </div>
    <div id="scrollbar" onscroll="scroll();" onClick="document.getElementById('scrollbar').style.zIndex = '0';">
        <div id="scrolled" style="z-index:5"></div>
    </div>
</div>
</body>
</html>

spookykl · January 3, 2008

may i bump this thread?

i guess no one knows?

Psycho · January 4, 2008

Well, first of all you have to be using form fields to edit the values. You can keep the look of the non-editable display when not editing though.

Here is a VERY quick and dirty example (this would take some time to do it right). Just click the edit button for the "Amanda" row to see how it works (that was the only one I modified). You would need to add a lot more functionality (e.g. disable the dit button if the checkbox isn't checked or some other check). Also, you would need to add some padding to the Name column since the text fields take up more vertical space and put the rows out of alignment.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
#corner {
            position:absolute;
            top:0px;
            left:0px;
            background-color:green;
            z-index:4;
            width:28px;
            height:25px;
        }
        #left_column {
            position:absolute;
            top:0px;
            left:0px;
            background-color:#99CCFF;
            margin-top:25px;
            width:120px;
            z-index:3;
        }
        #headers{
            overflow:hidden;
            background-color:#00CCFF;
            position:absolute;
            top:0px;
            left:0px;
            height:25px;
            margin-left:120px;
            z-index:3;
            white-space: nowrap;
        }
        #data{
            position:absolute;
            top:0px;
            left:0px;
            margin-left:120px;
            margin-top:25px;
            z-index:2;
            white-space: nowrap;
        }
        #container {
            position:absolute;
            top:45px;
		left:120px;
            width:75%;
            height:60%;
            border:1px solid #ffffff;
            overflow:hidden;
        }
        #scrollbar{
            position: absolute;
            overflow: auto;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            padding: 0px;
            z-index: 4;
        }
.wheelheader { 
    padding:5px;
    font-size:12px;
    background:#6060B3;
    color:#ffffff;
    font-weight:normal;
    border: 2px solid #000000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
.column0{width:20px;text-align:center;}
.column00{width:100px;text-align:center;}
        .column1{width:120px;text-align:center;}
        .column2{width:120px;text-align:center;}
        .column3{width:120px;text-align:center;}
        .column4{width:65px;text-align:center;}
        .column5{width:65px;text-align:center;}

.row0{height:25px;background-color:#00CCFF;text-align:center;}
        .row1{height:22px;text-align:center;}
        .row2{height:22px;text-align:center;}
        .row3{height:22px;text-align:center;}
        .row4{height:22px;text-align:center;}
        .row5{height:22px;text-align:center;}

        .inputText {text-align:center;width:90%;background-color:#E0E4E7;border:0px; read-only: true;}
        
</style>
<script>
        var data;
        var top;
        var left;
        var scrolled;
        var scrollbars;
        var container;
        var contentwidth;
        var contentheight;
        function init(){
            data=document.getElementById('data');
            top=document.getElementById('headers');
            left=document.getElementById('left_column')
            scrolled=document.getElementById('scrolled');
            scrollbars=document.getElementById('scrollbar');
            container=document.getElementById('container');
            contentheight=container.scrollHeight;
            contentwidth=container.scrollWidth;
            scrolled.style.height=contentheight+"px";
            scrolled.style.width=contentwidth+"px";
        }
        function scroll(){
            var x = scrollbars.scrollLeft;
            var y = scrollbars.scrollTop;
            data.style.left = "-"+x+"px";
            top.style.left="-"+x+"px";
            data.style.top = "-"+y+"px";
            left.style.top = "-"+y+"px";
        }

    function editRow(rowID) {
        document.getElementById('age'+rowID).readOnly = false;
        document.getElementById('age'+rowID).style.backgroundColor = '#FFFFFF';
        document.getElementById('sex'+rowID).readOnly = false;
        document.getElementById('sex'+rowID).style.backgroundColor = '#FFFFFF';
        document.getElementById('height'+rowID).readOnly = false;
        document.getElementById('height'+rowID).style.backgroundColor = '#FFFFFF';
        return;
    }

    </script>
</head>

<body bgcolor="#0066CC" onLoad="init()">

<div id="RTI" name="RTI" style="background-color:#E0E4E7; height:200px; width:599px; visibility:visible; top:40px; left:20px; position:absolute">

<h1 class="wheelheader" style="width:585px; top: -9px; position:absolute">Family Tree</h1>

<div style="background-color:#FFFFFF; width:100px; top:45px; left:20px; position:relative">
<table cellpadding="0" cellspacing="1" border="0">
<tr bgcolor="#00CCFF"><td width="100px">GROUPS</td></tr>
<tr bgcolor="#99CCFF"><td>Baby</td></tr>
<tr bgcolor="#99CCFF"><td>Children</td></tr>
<tr bgcolor="#99CCFF"><td>Adult</td></tr>
<tr bgcolor="#99CCFF"><td>Elder</td></tr>
</table>
</div>

<div id="container" >
    <div id="corner">
<table cellspacing="0" cellpadding="0" border="0"><tr class="row0">
        <td><div class="column0"><input type="checkbox" disabled="disabled"/><div></td>
        <td><div class="column00">Name<div></td>
        </tr></table>
</div>
    <div id="headers">
        <table cellspacing="0" cellpadding="0" border="0"><tr>
        <td><div class="column1">Age<div></td>
        <td><div class="column2">Sex<div></td>
        <td><div class="column3">Height<div></td>
        <td><div class="column4"><div></td>
        <td><div class="column5"><div></td>
        </tr></table>
    </div>
    <div id="left_column">
        <table cellspacing="0" cellpadding="0" border="0">
        <tr class="row1"><td><input type="checkbox" id="chkMe1" value="1"/></td><td>Bill</td></tr>
        <tr class="row2"><td><input type="checkbox" id="chkMe2" value="1"/></td><td>Mary</td></tr>
        <tr class="row3"><td><input type="checkbox" id="chkMe3" value="1"/></td><td>Todd</td></tr>
        <tr class="row4"><td><input type="checkbox" id="chkMe4" value="1"/></td><td>Amanda</td></tr>
        <tr class="row5"><td><input type="checkbox" id="chkMe5" value="1"/></td><td>Jaime</td></tr>
        </table>
    </div>

    <div id="data">
        <table cellspacing="0" cellpadding="0" border="0">
        <TR class="row1">
            <td><div class="column1">26</div></td>
            <td><div class="column2">Male</div></td>
            <td><div class="column3">6'0"</div></td>
            <td><div class="column4"><input type="button" value="Edit" /></div></td>
            <td><div class="column5"><input type="button" value="Delete" /></div></td>
        </TR>
        <TR class="row2">
            <td><div class="column1">30</div></td>
            <td><div class="column2">Female</div></td>
            <td><div class="column3">5'7"</div></td>
            <td><div class="column4"><input type="button" value="Edit" /></div></td>
            <td><div class="column5"><input type="button" value="Delete" /></div></td>
        </TR>
        <TR class="row3">
            <td><div class="column1">22</div></td>
            <td><div class="column2">Male</div></td>
            <td><div class="column3">5'8"</div></td>
            <td><div class="column4"><input type="button" value="Edit" /></div></td>
            <td><div class="column5"><input type="button" value="Delete" /></div></td>
        </TR>
        <TR class="row4" id="4">
            <td><div class="column1"><input class="inputText" type="text" name="age4" id="age4" value="25" readonly /></div></td>
            <td><div class="column2"><input class="inputText" type="text" name="sex4" id="sex4" value="Female" readonly /></div></td>
            <td><div class="column3"><input class="inputText" type="text" name="height4" id="height4" value="5'9"" readonly /></div></td>
            <td><div class="column4"><input type="button" value="Edit" onclick="editRow('4')" /></div></td>
            <td><div class="column5"><input type="button" value="Delete" /></div></td>
        </TR>
        <TR class="row5">
            <td><div class="column1">27</div></td>
            <td><div class="column2">Female</div></td>
            <td><div class="column3">5'6"</div></td>
            <td><div class="column4"><input type="button" value="Edit" /></div></td>
            <td><div class="column5"><input type="button" value="Delete" /></div></td>
        </TR>
        </table>
    </div>
    <div id="scrollbar" onscroll="scroll();" onClick="document.getElementById('scrollbar').style.zIndex = '0';">
        <div id="scrolled" style="z-index:5"></div>
    </div>
</div>
</body>
</html>

Sign In

Fixed Table Header with horizontal and vertical scrollbars

Recommended Posts

spookykl

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

spookykl

Link to comment

Share on other sites

spookykl

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information