jquery - 修复了表格中的第一行

Question

我有一个由软件创建的网站。在页面上，我有一个这样的表格：

<table>
    <tbody>
        <tr id="header">
            <th>Header1
            <th>Header2
            <th>Header3
        <tr>
            <td>Info1
            <td>Info2
            <td>Info3
        <tr>
            <td>Info4
            <td>Info5
            <td>Info6

不要问我没有结束标签它是如何工作的，但它确实如此。我想要做的是<tr id="header">当我向下滚动页面时，如果可能的话，甚至在页面内固定第一行“”。

我找到了很多解决方案，但他们都在要求<thead>，但我只能使用我所拥有的......

我很确定 jQuery 可以做到这一点，但我只是从 Jquery 开始......

Answer 1

您可以在页面中添加简单的 CSS：

tr#header {
    position: fixed;
    }
td {
    position: relative;
    top: 25px;
    display: inline-block;
    }

或者可以使用jQuery Fixed Table：

<script src="jquery.fixedtableheader.min.js" type="text/javascript"> </script>
<script type="text/javascript"> 
    $(document).ready(function() { 
        $('.tbl').fixedtableheader(); 
    }); 
</script>

Answer 2

你可以像这样单独在 CSS 中做到这一点：

jsFiddle

#header{
    position:fixed;
    background:blue;
    z-index:1;
}
#header th{
    border-right: 1px solid #fff;
}
#header :last-child{
    border-right: none;
}
 td{
    position:relative;
    top:25px;
    display:inline-block;
    margin-right:30px;
}