容器内的粘性标头

Question

我有一个表，位于页面上的容器中。当用户滚动过去时，我试图让表格的标题粘在页面顶部。我尝试了多种方法来使标题具有粘性，但我运气不佳。表数据正在JS中生成。任何帮助都会很棒！超文本标记语言    <div class="container-fluid"><div id="userTable" class="sticky-table">        <table id="ticketsTable">            <thead id="head" class="sticky-header"</thead>            <tbody id="body">            </tbody>        </table>    </div></div>JavaScriptfunction generateTableHeader() {    var headerArray = generateHeaderArray(),    headerString = "<thead id='head'><tr>" + "<th></th>";    if (!headerArray.length) {        $("#head").empty();        $("#userTable").append("<h1 id='noTicketsFound'>No tickets found.</h1>");        return;    }    headerOrder.forEach(function(key) {        var isChecked = key;        if (!$(".dropdown-menu-fixed #" + key).is(":checked")) {            isChecked += " uncheckedColumn";        }        headerString += "<th data-property='" + key + "' class='sortableHeader " + isChecked + "'>" +        dictionary[key] + "</th>";    });    headerString += "</tr></thead>";    // replaceWith seems faster than separate calls to empty then append.    $("#head").replaceWith(headerString);    // Add SORTCLASS to SORTPROPERTY column, since that is already sorted.    $(".sortableHeader." + SORTPROPERTY).addClass(SORTCLASS);}使标题粘在滚动功能上function stickyTableHeader() {    $(".sticky-table").each(function() {      var el = $(this),        offset = el.offset(),        scrollTop = $(window).scrollTop(),        stickyHeader = $(".stickyHeader", this);      if (scrollTop > offset.top && scrollTop < offset.top + el.height()) {        stickyHeader.css({          visibility: "visible"        });      } else {        stickyHeader.css({          visibility: "hidden"        });      }    });  }

Answer 1

使用 CSS 这非常简单：

th {

  position: sticky;

  top: 0;

  background: #eee;

}

td, th {

  padding: 10px;

}

<div class="container">

  <h1>Some Title</h1>

  

  <table>

    <thead>

      <tr>

        <th>Heading 1</th>

        <th>Heading 2</th>

        <th>Heading 3</th>

      </tr>

    </thead>

    

    <tbody>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

    </tbody>

  </table>

</div>

Answer 2

我相信的立场：粘性；尚未得到所有浏览器的支持。

我有一个有点严厉的解决方案，但它适用于所有浏览器。基本上，您使用一个 Div 作为另一个 Div 的掩码。

这两个 div 都包含完全相同的表。mask-div 将有效地裁剪表格以仅显示标题。

<div class = 'mask-div'>

   <table>Copy of Table A</table>

</div>

<div class='scrolling-div">

  <table> Table A </table>

</div>

<style>

div{

  top:0px;

  left:0px;

}

.mask-div{

  width:100%;

  position: fixed;

  height:40px;

  overflow: hidden;

  background:white;

}

<style>

Answer 3

th {

  position: sticky;

  top: 0;

  background: #eee;

}

td, th {

  padding: 10px;

}

<div class="container">

  <h1>Some Title</h1>

  

  <table>

    <thead>

      <tr>

        <th>Heading 1</th>

        <th>Heading 2</th>

        <th>Heading 3</th>

      </tr>

    </thead>

    

    <tbody>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

      <tr>

        <td>Thing 1</td>

        <td>Thing 2</td>

        <td>Thing 3</td>

      </tr>

    </tbody>

  </table>

</div>