www.webdeveloper.com
Results 1 to 3 of 3

Thread: scrollable table with fixed header

  1. #1
    Join Date
    Oct 2011
    Posts
    350

    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. #2
    Join Date
    Mar 2011
    Posts
    1,136
    I think you over-edited the HTML you posted. There seems to be missing parts. But the basic problem I see is that you never set a specific width or height on any element. With no settings, the elements will simply expand to enclose the content, so there is never any overflow. Try setting the 'height' property on the element you want to scroll.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Oct 2011
    Posts
    350
    Yah, i tried to add height and it work thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles