凍結HTML表格標題

Question

如何凍結HTML表中的第一行（thead）？ 是通過javascript還是通過html選項凍結標題行？ （因此，當您垂直向下滾動時，您始終可以看到它）。

如何凍結HTML表中的第一行（thead）？ 是通過javascript還是通過html選項凍結標題行？ （因此，當您垂直向下滾動時，您始終可以看到它）。

  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> 

Answer 1

定義thead表。 分配position:fixed到該元素和相對高度。 定義tbody與position:absolute並在表頭的端部的頂部開始。

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/