1

Нужно чтобы шапка таблицы скролилась, Есть таблица в блоке, блок ограничен по высоте, нужно чтоб при скроле внутри этого блока, шапка таблицы фиксировалась. Сделал через jquery, и немного костыльно, пришлось дублировать шапку в отдельную таблицу давать ширину каждой ячейке, и есть навигация по заголовкам таблицы, но есть баг, в ФФ и IE при скроле шапка фиксируется с дерганьем, пример ниже. Как можно доработать, может у кого есть наработанный пример?

function getWidthTd() {
  $('.table-blue-wrp').each(function() {
    var that = $(this),
      table = that.find('.table-blue'),
      thatWidth = table.width();
    table.find('tr:first-child td').each(function(index) {
      var widthTd = $(this).width();
      that.find('.table-blue-fixed').width(thatWidth);
      that.find('.table-blue-fixed td').eq(index).width(widthTd)
    });
  });
}

$('.table-nav__lnk').on('click', function(e) {
  var that = $(this),
    parent = that.closest('.table-blue-wrp'),
    container = parent.find('.table-blue-scroll'),
    fixTableH = parent.find('.table-blue-fixed').outerHeight(),
    elementClick = that.attr("href"),
    destination = $(elementClick).offset().top - fixTableH;
  parent.find('.table-nav__lnk').removeClass('table-nav__lnk_active');
  that.addClass('table-nav__lnk_active');
  container.animate({
    scrollTop: destination - container.offset().top + container.scrollTop()
  });
  e.preventDefault();
});

$('.table-blue-scroll').scroll(function() {
  var scrollPos = $(this).scrollTop(),
    child = $(this).find('.table-blue-fixed');
  child.css('top', scrollPos);
});

$(window).resize(function() {
  getWidthTd();
});
$(window).resize();
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
em,
img,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html * {
  box-sizing: border-box;
  text-size-adjust: 100%;
  font-size: 100%;
  outline: none;
}

html,
body {
  height: 100%;
}

.table-nav {
  margin-bottom: 20px;
  margin-left: -20px;
  margin-right: -20px;
  font-size: 12px;
}

.table-nav__lnk {
  color: #414141;
  text-decoration: none;
}

.table-nav__lnk:hover {
  text-decoration: underline;
}

.table-nav__lnk_active {
  color: blue;
  text-decoration: underline;
}

.table-nav__lnk_active:hover {
  text-decoration: none;
}

.table-nav__item {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.table-blue-scroll {
  position: relative;
  max-height: 300px;
  margin-bottom: 20px;
  overflow: auto;
}

.table-blue-scroll table {
  width: 100%;
}

.table-blue-fixed {
  width: 100%;
  position: absolute;
  border-collapse: collapse;
  border: 1px solid #f2f2f2;
  z-index: 2;
}

.table-blue-fixed td {
  padding: 15px 25px;
  background-color: blue;
  color: #fff;
  font-weight: 600;
}

.table-blue {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #f2f2f2;
}

.table-blue thead th {
  padding: 15px 25px;
  background-color: blue;
  color: #fff;
  font-weight: 600;
  text-align: left;
}

.table-blue tbody th {
  background-color: #8f9ba7;
  color: #fff;
  font-family: "DinCondensed", sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  padding: 15px 25px;
}

.table-blue tbody tr:nth-child(2n+1) td {
  background-color: #f2f2f2;
}

.table-blue tbody td {
  padding: 15px 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="table-blue-wrp">
  <div class="table-nav">
    <div class="table-nav__item"><a class="table-nav__lnk" href="#table-ttl-5">Модуль "Арендодатель"</a></div>
    <div class="table-nav__item"><a class="table-nav__lnk" href="#table-ttl-6">Модуль "Стоматология"</a></div>
    <div class="table-nav__item"><a class="table-nav__lnk" href="#table-ttl-7">Модуль: Транспорт</a></div>
    <div class="table-nav__item"><a class="table-nav__lnk" href="#table-ttl-8">1С обмен с сайтом</a></div>
  </div>
  <div class="table-blue-scroll">
    <table class="table-blue-fixed">
      <tbody>
        <td>Название продукта</td>
        <td>Программная (руб)</td>
        <td>Аппаратная (руб)</td>
      </tbody>
    </table>
    <table class="table-blue">
      <thead>
        <tr>
          <th>Название продукта</th>
          <th>Программная (руб)</th>
          <th>Аппаратная (руб)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>350,00</b></td>
          <td><b>350,00</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>5472,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>852,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
        <tr id="table-ttl-5">
          <th colspan="3">Lorem ipsum dolor sit amet, consectetur</th>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
        <tr id="table-ttl-6">
          <th colspan="3">Lorem ipsum dolor sit amet, consectetur</th>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
        <tr id="table-ttl-7">
          <th colspan="3">Lorem ipsum dolor sit amet, consectetur</th>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
        <tr id="table-ttl-8">
          <th colspan="3">Lorem ipsum dolor sit amet, consectetur</th>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>1092,80</b></td>
          <td><b>730,80</b></td>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
          <td><b>158,45</b></td>
          <td><b>250,90</b></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

2
  • а просто шапку снаружи блока нельзя было сделать?
    – teran
    13 мар 2018 в 8:48
  • отвечать вопросом на вопрос, не красиво! а как тогда ширину сделать таблицы которая снаружи скролла?
    – Karalahti
    13 мар 2018 в 9:10

1 ответ 1

0

Долгий поиск в google, дал свои плоды, найден маленький плагин который умеет так делать, вот ссылка, Вопрос закрыт.

Ваш ответ

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

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