0

форумчане, пользуюсь для своего сайта таблицей footable. Столкнулся с такой проблемой что не могу реализовать фиксированный заголовок при вертикальной прокрутке таблицы, создал для этого отдельный блочный элемент со свойством sticky, может я как-то не так использую или ещё что, подскажите, пожалуйста. Все скрипты и таблицы стилей использую стандартные для плагина

.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
  background: lightpink;
}

.raz {
  border: 1px solid red;
  max-height: 400px;
  display: flex;
  /* This is a (hacky) way to make the .grid element size to fit its content */
  overflow: auto;
}
<div class="raz">
  <table class="table" id="maintable">

    <thead>

      <tr class="sticky">
        <th data-breakpoints="xs">ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th data-breakpoints="xs">Job Title</th>
        <th data-breakpoints="xs sm">Started On</th>
        <th data-breakpoints="xs sm md" data-title="DOB">Date of Birth</th>
      </tr>

    </thead>

    <tbody>
      <tr data-expanded="true">
        <td>1</td>
        <td>Dennise</td>
        <td>Fuhrman</td>
        <td>High School History Teacher</td>
        <td>November 8th 2011</td>
        <td>July 25th 1960</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Elodia</td>
        <td>Weisz</td>
        <td>Wallpaperer Helper</td>
        <td>October 15th 2010</td>
        <td>March 30th 1982</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Raeann</td>
        <td>Haner</td>
        <td>Internal Medicine Nurse Practitioner</td>
        <td>November 28th 2013</td>
        <td>February 26th 1966</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Junie</td>
        <td>Landa</td>
        <td>Offbearer</td>
        <td>October 31st 2010</td>
        <td>March 29th 1966</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Solomon</td>
        <td>Bittinger</td>
        <td>Roller Skater</td>
        <td>December 29th 2011</td>
        <td>September 22nd 1964</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Bar</td>
        <td>Lewis</td>
        <td>Clown</td>
        <td>November 12th 2012</td>
        <td>August 4th 1991</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Usha</td>
        <td>Leak</td>
        <td>Ships Electronic Warfare Officer</td>
        <td>August 14th 2012</td>
        <td>November 20th 1979</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Lorriane</td>
        <td>Cooke</td>
        <td>Technical Services Librarian</td>
        <td>September 21st 2010</td>
        <td>April 7th 1969</td>
      </tr>
      <td>9</td>
      <td>Dennise</td>
      <td>Fuhrman</td>
      <td>High School History Teacher</td>
      <td>November 8th 2011</td>
      <td>July 25th 1960</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Elodia</td>
        <td>Weisz</td>
        <td>Wallpaperer Helper</td>
        <td>October 15th 2010</td>
        <td>March 30th 1982</td>
      </tr>
      <tr>
        <td>11</td>
        <td>Raeann</td>
        <td>Haner</td>
        <td>Internal Medicine Nurse Practitioner</td>
        <td>November 28th 2013</td>
        <td>February 26th 1966</td>
      </tr>

    </tbody>
  </table>
</div>]

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/footable.js"></script>
<script type="text/javascript">
  jQuery(function($) {
    $('.table').footable();

  });
</script>

</body>

</html>

1 ответ 1

0

Для этого необходимо отделить контент таблицы от заголовка

table tbody, table thead
{
    display: block;
}

только после этого можно использовать sticky, overflow: auto и т. п.

но теперь заголовок отвязан от таблицы и не разделяет с ней общую ширину. ширину придется задать вручную

th
{
    width: 72px;
}
td
{
    width: 72px;
}
1
  • блок sticky всё равно не захватывает заголовок таблицы, а остается выше как при отображении, так и в коде страницы браузера не захватывая thead, хоть и в саблайме thead внутри этого блока 13 мар 2019 в 12:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.