newphpcoder Posted July 1, 2013 Share Posted July 1, 2013 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 More sharing options...
newseed Posted July 1, 2013 Share Posted July 1, 2013 Give #operator_list a fixed height. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now