修复了表中的第一行 [重复]答案

【问题标题】：Fixed first row in a table [duplicate]修复了表中的第一行 [重复]
【发布时间】：2013-05-21 15:04:35
【问题描述】：

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

<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...

【问题讨论】：

你可以在 CSS 中做到这一点...检查这里：stackoverflow.com/questions/8423768/…
它确实有效，因为 HTML 解析器知道 TH 或 TD 中没有 TR，请参阅 HTML 规范以了解这一点。这是有效的 HTML（3.2 / 生活标准 5.0+）
我找到了那个链接，但正如我之前所说：我没有部分，所以我必须使用我所拥有的......
可以使用jQuery Fixed Table插件mustafaozcan.net/en/demo/fixedtableheader/…
也请先自行研究。在（非阴影）DOM 中没有该元素不应该对 CSS 或 jQuery 选择器造成任何问题。请更具体地提出您的问题。

【解决方案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>

【讨论】：

@Nathan 总是乐于提供帮助 :)
请在您的回答中添加相关代码和信息。仅链接的答案通常会被标记。 meta.stackexchange.com/questions/92505/…
@apaul34208 谢谢，我添加了简单的 CSS 代码。
我的意思是与您建议的插件相关的代码。这是一个很好的解决方案，它只需要在链接断开或更改时保持有用。
插件页面的链接无效。所以最好使用这个链接给任何需要它的人：github.com/mustafaozcan/jquery.fixedtableheader

【解决方案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;
}

【讨论】：