Question

我有两个表，第一个用作使用datepicker的搜索功能，第二个用于保存tbody和var tableOffset = $("#table-1").offset().top; var $header = $("#table-1 > thead"); var $fixedHeader = $("#header-fixed").append($header.clone()); console.log(tableOffset); console.log($header); console.log($fixedHeader); console.log($fixedHeader.is(":hidden")); $(window).bind("scroll", function () { var offset = $(this).scrollTop(); if (offset >= tableOffset && $fixedHeader.is(":hidden")) { $fixedHeader.show(); $.each($header.find('#tr1 > th'), function (ind, val) { var original_width = $(val).width(); $($fixedHeader.find('#tr1 > th')[ind]).width(original_width); }); } });，它包含我的数据的实际标题和行。我尝试了the npm package has been renamed

<?xml version="1.0" encoding="UTF-8"?>
<Employees>
    <Employee>
        <name>Name 2</name>
        <rol1>Role 1</rol1>
    </Employee>
    <Employee>
        <name>Name 1</name>
        <rol2>Role 2</rol2>
    </Employee>
</Employees>

然而，它对我的页面没有任何影响。甚至可以完成吗？

Answer 1

如何使用postion:sticky使用纯CSS执行此操作？

body { height: 1000px; }
thead tr th{
    background: white;
    position: sticky;
    top: 0;
  }

<table id="table-1">
    <thead id="header-fixed">
        <tr>
            <th >Col1</th>
            <th >Col2</th>
            <th >Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info000000</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>infolllllllllllll</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info00000000</td>
        </tr>
    </tbody>
</table>

Answer 2

您可以在标头容器上应用.header-container-fixed { left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1; } CSS以保持定位。

请检查以下代码::

{{1}}

如何在滚动数据时保持标题固定

2 个答案: