Jump to content

scrollable table with fixed header


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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...