Scrollable table with fixed header

Hi,

I have webpage that consist of table where I display the list of employee, the problem is there’s a lot of employee list so I need to add scrollbar to my table but the header is fixed, when I tried to add code

autoflow:auto;

in my css for <div> operator_list it did not work.

here is my css code:



#operator_list{
    position: absolute;
    margin-left: 350px;
    overflow: auto;

}

table {
    margin: 12px;
    margin-left: 3px;
    border: 1px solid #DDD;

}

th {
    background: #694;
    color: #FFF;
    padding: 2px 6px;
    border-collapse: separate;
    border: 1px solid #000;
}

td {
    border: 1px solid #DDD;
    text-align: left;

}

and here is the code of my webpage



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Operators List</title>
<head>
<link rel="stylesheet" type="text/css" href="op_report.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />

<link rel="stylesheet" type="text/css" href="filtergrid.css" />
<script language="javascript" type="text/javascript" src="tablefilter.js"></script>
<script language="javascript" type="text/javascript" src="tablefilter_all.js"></script>
<script language="javascript" type="text/javascript" src="tablefilter_all_min.js"></script>



<link rel="stylesheet" type="text/css"  href="prompt.css">
<link rel="stylesheet" type="text/css"  href="notify.css">

<script type="text/javascript" src="prompt.js"> </script>
<script type="text/javascript" src="notification.js"> </script>
<script type="text/javascript">

//----auto complete process name---//
$().ready(function() {
    $("#process").autocomplete("get_process_list.php", {
       width: 145,
        matchContains: true,
        mustMatch: true,
        selectFirst: false
    });

    $("#process").result(function(event, data, formatted) {
        $("#process_id").val(data[1]);
    });
    });

//------auto complete employee id----//
$().ready(function() {
    $("#emp_id").autocomplete("get_op_data.php", {
       width: 145,
        matchContains: true,
        mustMatch: true,
        selectFirst: false
    });

    $("#emp_id").result(function(event, data, formatted) {
    $("#employee_id").val(data[0]);
    });

    $("#emp_id").result(function(event, data, formatted) {
        $("#lastname").val(data[1]);
    });

    $("#emp_id").result(function(event, data, formatted) {
    $("#firstname").val(data[2]);
    });

    $("#emp_id").result(function(event, data, formatted) {
    $("#middlename").val(data[3]);
    });

    $("#emp_id").result(function(event, data, formatted) {
    $("#process").val(data[4]);
    });

    });

/*AJAX*/
function AJAX(){
        var xmlHttp;
        try{
            xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
            return xmlHttp;
            }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
                return xmlHttp;
                }
            catch (e){
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    return xmlHttp;
                    }
                catch (e){
                    alert("Your browser does not support AJAX!");
                    return false;
                    }
                }
            }
        }

</script>
</head>
<body onload=document.getElementById("employee_id").focus();>
<form name="operator_list" action="" method="post" autocomplete="off">
    <!--Tab List -->
<div id="ddcolortabs">
<ul>
<li id="current"> <a href="operator.php" title="Operator's List"><span>Production Operators</span></a></li>
<li> <a href="supervisor.php" title="Supervisor's List"><span>Production Supervisors</span></a></li>
</ul>
</div>
<br/>
<br/>
<div>
</div>

<div>
<table>
<tr>
<td>Employee ID Search :</td>
<td><input type="text" name="emp_id" id="emp_id" value=""></td>
</tr>
</table>
</div>
<!-- Fieldset for Operators Information-->
<div id="operators_fieldset">
<fieldset>
<legend>Input Operators Information</legend>
<table>
<tr>
<td>Employee ID: </td>
<td><input type="text" name="employee_id" id="employee_id" value=""></td>
<tr>

<tr>
<td>Lastname: </td>
<td><input type="text" name="lastname" id="lastname" value=""></td>
</tr>

<tr>
<td>Firstname: </td>
<td><input type="text" name="firstname" id="firstname" value=""></td>
</tr>

<tr>
<td>Middlename: </td>
<td><input type="text" name="middlename" id="middlename" value=""></td>
</tr>

<tr>
<td>Process: </td>
<td><input type="text" name="process" id="process" value=""></td>
</tr>
</table>

<input type="hidden" name="process_id" id="process_id" value="" />

<center>
<input type="submit" name="save" id="save" value="Save">
<input type="button" name="update" id="update" value="Update">
<input type="button" name="delete" id="delete" value="Delete">
</center>
</fieldset>
</div>
<div id="operator_list">
<table id="op_list">
<thead>
<tr>
<th>EMPLOYEE ID</th>
<th>LASTNAME</th>
<th>FIRSTNAME</th>
<th>MIDDLENAME</th>
<th>PROCESS</th>
</tr>
</thead>

<tr><td>f</td><td>fv</td><td>f</td><td>f</td><td>HS/BD</td></tr><tr><td>gh</td><td>d</td><td>v</td><td>d</td><td>Deflashing</td></tr><tr><td>fvs</td><td>d</td><td>xcc</td><td>csdd</td><td>Deflashing</td></tr><tr><td>fv</td><td>c</td><td>c</td><td>d</td><td>Final Mix</td></tr><tr><td>b</td><td>vc</td><td>x</td><td>c</td><td>HS/BD</td></tr><tr><td>c</td><td>x</td><td>s</td><td>s</td><td>HS/BD</td></tr><tr><td>ds</td><td>s</td><td>s</td><td>d</td><td>Core Molding</td></tr><tr><td>sd</td><td>d</td><td>d</td><td>d</td><td>Deflashing</td></tr><tr><td>sf</td><td>df</td><td>dc</td><td>dqd</td><td>Deflashing</td></tr><tr><td>d</td><td>df</td><td>dff</td><td>df</td><td>Compound Mixing</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td><td>Compound Mixing</td></tr><tr><td>DC-00003</td><td>Chin</td><td>Un</td><td>Lee</td><td>Deflashing</td></tr><tr><td>DC-00002</td><td>de Jesus</td><td>Jay</td><td>Dy</td><td>Deflashing</td></tr><tr><td>DC-00001</td><td>Dela Cruz</td><td>Juan</td><td>Uy</td><td>Compound Mixing</td></tr></table>
<table id=''>
</form>
<script language="javascript" type="text/javascript">
/*var totalRowDex = tf_Tag(tf_Id('op_list'), "tr").length;
var inventProp = {
    rows_counter: true,
    loader: true,
    loader_text: "FilterING DaTa....",
    rows_always_visible: [totalRowDex]
};
setFilterGrid("op_list", inventProp);
*/
setFilterGrid("op_list");
</script>
</body>
</html>

I tried to search on google but when I tried it did not work so I decided to post my problem in forum.
I hope somebody can help me.

Thank you so much

Thank you

Hm, I’ve seen a lot of info on this online. Here’s one example:

and here’s another:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Thank you for the links, but it did not compatible with my scenario.

When I tried to add

 overflow:scroll;

in my <div> the output is it has a scrollbar display but it was disable. i think it has connection on setFilterGrid but I dont know how the scrollbar will display in set filter grid.

Thank you

Here’s another possibility:

Thank you