Question

如何冻结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/

冻结HTML表头

1 个答案: