Jump to content

scrollable table with fixed header


newphpcoder

Recommended Posts

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 muchThank you
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...