1

how do i freeze the first row ( thead ) in a HTML table? Is this via javascript or is there an html option to freeze the header row? (so when you scroll down vertically you can always see it).

how do i freeze the first row ( thead ) in a HTML table? Is this via javascript or is there an html option to freeze the header row? (so when you scroll down vertically you can always see it).

    function sortTable(f,n){
        var rows = $('#mytable tbody  tr').get();

        rows.sort(function(a, b) {

            var A = getVal(a);
            var B = getVal(b);

            if(A < B) {
                return -1*f;
            }
            if(A > B) {
                return 1*f;
            }
            return 0;
        });

        function getVal(elm){
            var v = $(elm).children('td').eq(n).text().toUpperCase();
            if($.isNumeric(v)){
                v = parseInt(v,10);
            }
            return v;
        }

        $.each(rows, function(index, row) {
            $('#mytable').children('tbody').append(row);
        });
    }
    var f_errorStringOfCurrentDataSet = 1;
    var f_errorStringOfMatchedDataSet = 1;
    var f_testCaseNameOfCurrentDataSet = 1;
    var f_regexMatched = 1;
    $("#errorStringOfCurrentDataSet").click(function(){
        f_errorStringOfCurrentDataSet *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_errorStringOfCurrentDataSet,n);
    });
    $("#errorStringOfMatchedDataSet").click(function(){
        f_errorStringOfMatchedDataSet *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_errorStringOfMatchedDataSet,n);
    });
    $("#testCaseNameOfCurrentDataSet").click(function(){
        f_testCaseNameOfCurrentDataSet *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_testCaseNameOfCurrentDataSet,n);
    });
    $("#regexMatched").click(function(){
        f_regexMatched *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_regexMatched,n);
    });
    table {
        padding: 0;
        border-collapse: collapse;
        border: 1px solid #ccc;
        margin-top: 20px;
        table-layout: fixed;
        width: 90%;
    }

    td {
        border: 1px solid #ccc;
        padding: 5px;
  word-break: break-word;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }

    th, td {
        overflow: hidden;
        padding: 5px;
        text-align: left;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>


<h2>Hello: </h2> 
<br>

<br>

<table border="1" id="mytable">
    <thead>
        <tr>
        <th width="14%" id="testCaseNameOfCurrentDataSet">Testcasename</th>
  <th width="5%" id="regexMatched">Regex</th>
        <th width="19%" id="processedErrorStringGuided">Processed Error Current</th>
        <th width="19%" id="processedErrorStringReference">Processed Error Reference</th>
        <th width="5%">Link</th>
        <th width="19%" id="errorStringOfCurrentDataSet">Raw Error Current</th>
        <th width="19%" id="errorStringOfMatchedDataSet">Raw Error Reference</th>        
    </tr>
    </thead>

    <tbody>
  <tr style="color: red">
            <td>ABCD EFDH IJKL MNOP QRST UV</td>
            <td>NO</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
   <td> ABCD </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            
        </tr>
  <tr style="color: red">
            <td>ABCD EFDH IJKL MNOP QRST UV</td>
            <td>NO</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
   <td> ABCD </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            
        </tr>
  <tr style="color: red">
            <td>ABCD EFDH IJKL MNOP QRST UV</td>
            <td>NO</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
   <td> ABCD </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            
        </tr>
  <tr style="color: red">
            <td>ABCD EFDH IJKL MNOP QRST UV</td>
            <td>NO</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
   <td> ABCD </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            
        </tr>
  <tr style="color: red">
            <td>ABCD EFDH IJKL MNOP QRST UV</td>
            <td>NO</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
   <td> ABCD </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            
        </tr>
  <tr style="color: red">
            <td>ABCD EFDH IJKL MNOP QRST UV</td>
            <td>NO</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
   <td> ABCD </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            
        </tr>
  <tr style="color: red">
            <td>ABCD EFDH IJKL MNOP QRST UV</td>
            <td>NO</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
   <td> ABCD </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            
        </tr>
  <tr style="color: red">
            <td>ABCD EFDH IJKL MNOP QRST UV</td>
            <td>NO</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
   <td> ABCD </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            
        </tr>
  <tr style="color: red">
            <td>ABCD EFDH IJKL MNOP QRST UV</td>
            <td>NO</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
   <td> ABCD </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            
        </tr>
  <tr style="color: red">
            <td>ABCD EFDH IJKL MNOP QRST UV</td>
            <td>NO</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
   <td> ABCD </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td>
            <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td>
            
        </tr>

    </tbody>
   </table>
user3570620
  • 359
  • 1
  • 6
  • 16
  • are you asking if you can keep a header position: fixed? – Keith May 15 '17 at 14:30
  • yes. the first row of the HTML table should always be visible when we scroll down vertically . – user3570620 May 15 '17 at 14:31
  • duplicate ? http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque – parlad May 15 '17 at 14:34
  • 2
    Possible duplicate of [Table header to stay fixed at the top when user scrolls it out of view with jQuery](http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque) – Spencer May 15 '17 at 15:32

1 Answers1

1

Define the thead of the table. Assign position:fixed to that element and the relative height. Define the tbody with position:absolute and with the top starting at the end of the table header.

HTML:

<table id="table-1">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>

CSS:

body { height: 1000px; }
thead { 
  position: fixed; 
  height: 20px;
}
tbody { 
  top: 20px;
  position: absolute;
}

jsfiddle: http://jsfiddle.net/fj8wM/6916/

quirimmo
  • 9,800
  • 3
  • 30
  • 45