Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts

    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
    Code:
    autoflow:auto;
    in my css for <div> operator_list it did not work.


    here is my css code:
    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

    Code:
    <!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

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    You need to set a fixed size to the DIV so it doesn't just expand with your items.

    Code:
    overflow:auto;
    height: 250px;
    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • Users who have thanked whizard for this post:

    newphpcoder (07-01-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •