Прикрепите строку таблицы к верхней части браузера, прокручивая - PullRequest
Новая
       35

Прикрепите строку таблицы к верхней части браузера, прокручивая

0 голосов
/ 10 ноября 2019

У меня есть таблица, это пример: 

<table class="table">
  <thead>
    <tr>
      <td>#</td>
      <td>First</td>
      <td>Last</td>
      <td>Handle</td>
    </tr>
  </thead>
  <tbody>
    <tr class="stic-top">
      <td>1</td>
      <td>Name</td>
      <td>Last Name</td>
      <td>Handle</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat @fat @fat @fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Мне нужно вставить первую строку после заголовка в верхней части браузера.

Я использую этот скрипт, чтобы прикрепить его:

$('tr.stic-top').addClass('original').clone().insertAfter('tr.stic-top').addClass('cloned').css('position','fixed').css('top','0').css('background', 'rgb(255, 255, 255, 1)').css('margin-top','0').css('z-index','1500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);

function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {

    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');

$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  } 
}

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

Как сохранить ширину столбцовклонированная (прикрепленная) строка, которая должна соответствовать ширине столбца исходной таблицы?

1 Ответ

1 голос
/ 11 ноября 2019

Вы должны дублировать всю таблицу, чтобы сохранить ширину выровненной. Я предлагаю выбросить скрипт и использовать вместо него position:sticky. Он не работает с tbody, tfoot, thead или tr, но работает с клетками. 

.stic-top > td {
  position: sticky;
  top: 0px;
  background: lightblue;
}
<div id=short-container style="height: 50px; overflow-y: scroll;">
<table class="table">
  <thead>
    <tr>
      <td>#</td>
      <td>First</td>
      <td>Last</td>
      <td>Handle</td>
    </tr>
  </thead>
  <tbody>
    <tr class="stic-top">
      <td>1</td>
      <td>Name</td>
      <td>Last Name</td>
      <td>Handle</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat @fat @fat @fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>
...