jQuery 固定表中的第一行

Fixed first row in a table

提问by Nathan

I have a website that is created by a software. On the page I have a table like this:

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

<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

Don't ask me how it works without the closing tags but it does. What I want to do is have the first row "<tr id="header">" fixed when I scroll down the page or even within the page if possible.

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

I found many solutions but they were asking for <thead>and all that, but I can only work with what I have...

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

I'm pretty sure jQuery can do this but I'm just starting out with Jquery...

我很确定 jQuery 可以做到这一点，但我刚刚开始使用 Jquery ......

回答by Valery Viktorovsky

You can add simple CSS to your page:

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

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

Or it's possible to use jQuery Fixed Table:

或者可以使用jQuery Fixed Table：

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

回答by apaul

You could do it it in CSS alone like so:

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

jsFiddle

js小提琴

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