SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hm, I've seen a lot of info on this online. Here's one example:

    http://css-tricks.com/video-screenca...-highlighting/

    and here's another:

    http://www.imaputz.com/cssStuff/bigFourVersion.html

  3. #3
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the links, but it did not compatible with my scenario.

    When I tried to add
    Code:
     overflow:scroll;
    in my <div> the output is it has a scrollbar display but it was disable. i think it has connection on setFilterGrid but I dont know how the scrollbar will display in set filter grid.


    Thank you
    scroll.JPG

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)

  5. #5
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you


Bookmarks

Posting Permissions

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