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;
}

修复了表格中的第一行

2 个答案: