Скролл шапки таблицы?

239
14 марта 2018, 04:26

Нужно чтобы шапка таблицы скролилась, Есть таблица в блоке, блок ограничен по высоте, нужно чтоб при скроле внутри этого блока, шапка таблицы фиксировалась. Сделал через 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>

Answer 1

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

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте hersones.com.ua
ТОП-10
READ ALSO
Появляется огромная белая полоса с Bootstrap4
CSS

Появляется огромная белая полоса с Bootstrap4

Привет!Я начал делать адаптив для сайта и заметил что начала появлятся огромная белая полоса справа(видно на скриншоте)С чем это связано...

 250
css vs svg для создания простых изображений
CSS

css vs svg для создания простых изображений

На странице требуется создать несколько (не больше сотни точно, скорее десяток) интерактивных рисунков (надписи и некоторые элементы могут...

 252
Что не так с синтаксисом MySQL?
MySQL

Что не так с синтаксисом MySQL?

К примеру есть такой SQL запрос, пример:

 240
Определение положения ToolTip относительно PlacementTarget
c#

Определение положения ToolTip относительно PlacementTarget

Доброго времени сутокВожусь с собственным представлением ToolTip

 208