Липкий заголовок внутри контейнера

Question

У меня есть таблица, которая находится в контейнере на странице. Я пытаюсь заставить заголовки таблицы придерживаться верхней части страницы, когда пользователь прокручивает страницу. Я пробовал несколько способов сделать заголовки липкими, но мне не очень повезло.

Данные таблицы генерируются в JS.

Любая помощь будет отличной!

HTML

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

JavaScript

function 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"
        });
      }
    });
  }

  // DOM Ready
  $(function() {
    var clonedHeaderRow;

    $(".sticky-table").each(function() {
      clonedHeaderRow = $(".sticky-header", this);
      clonedHeaderRow
        .before(clonedHeaderRow.clone())
        .css("width", clonedHeaderRow.width())
        .addClass("stickyHeader");
    });

    $(window)
      .scroll(stickyTableHeader)
      .trigger("scroll");
  });

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 будет эффективно обрезать таблицу, чтобы показать только thead.

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