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