文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >冻结HTML表头

问冻结HTML表头
EN

Stack Overflow用户
提问于 2017-05-15 22:24:47
回答 1查看 707关注 0票数 1

如何冻结HTML表格中的第一行(标题)？这是通过javascript实现的，还是有一个html选项来冻结标题行？(因此，当你垂直向下滚动时，你总是可以看到它)。

如何冻结HTML表格中的第一行(标题)？这是通过javascript实现的，还是有一个html选项来冻结标题行？(因此，当你垂直向下滚动时，你总是可以看到它)。

​

代码语言：javascript
复制
    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);
    });
代码语言：javascript
复制
    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;
    }
代码语言：javascript
复制
<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>

​

javascript
jquery
html
EN

回答 1

Stack Overflow用户

发布于 2017-05-15 23:07:42

定义表的thead。将position:fixed赋值给该元素和相对高度。使用position:absolute定义tbody，顶部从表头的末尾开始。

HTML：

代码语言：javascript
复制
<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：

代码语言：javascript
复制
body { height: 1000px; }
thead { 
  position: fixed; 
  height: 20px;
}
tbody { 
  top: 20px;
  position: absolute;
}

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43981984

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档