БЛОГ НА HUSL


Помогите настроить фиксацию заголовков таблицы при горизонтальном скроле

Автор вопроса: vasiluey1992

Пример: http://jsfiddle.net/4jfQ6/, но, нужно добавить такую же фиксацию и для верхних заголовков при горизонтальном скроле.

Добавлял и position: fixed и stiky не срабатывает

Только если можно без jQuery, лучше на js пример

jQuery(document).ready(function($) {
  var $table = $('table'),
    $header = $('#header'),
    $thead = $('thead');
  $thead.find('th').each(function() {
    var $newdiv = $('<div />', {
      style: 'width:' + $(this).width() + 'px'

    });
    $newdiv.text($(this).text());
    $header.append($newdiv);
  });

  var $viewport = $(window);

  $viewport.scroll(function() {
    $header.css({
      left: -$(this).scrollLeft()
    });

  });
});
#header {
  width: 150%;
  display: block;
  position: fixed;
  background: #fff;
  overflow: hidden;
  z-index: 1;
}

#header div {
  display: table-cell;
  padding: 15px;
  border: 1px solid #ccc;
  border-collapse: collapse;
  font-weight: bold;
}

table {
  width: 150%;
}

thead {
  visibility: hidden;
}

td,
th {
  border: 1px solid #ccc;
  border-collapse: collapse;
  padding: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header"></div>
<table>
  <thead>
    <tr>
      <th>
        Столбец 1
      </th>
      <th>
        Столбец 2
      </th>
      <th>
        Столбец 3
      </th>
    </tr>
  </thead>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
</table>


Источник

Ответы (3 шт):

Автор решения: Проста Miha

Надеюсь это вам поможет)

body {
  margin: 0;
}

table {
  width: 150%;
}

thead {
  position: sticky;
  top: 0;
  left: 0;
  background-color: #fff;
}

td,
th {
  border: 1px solid #ccc;
  border-collapse: collapse;
  padding: 15px;
}
<table>
  <thead>
    <tr>
      <th>
        Столбец 1
      </th>
      <th>
        Столбец 2
      </th>
      <th>
        Столбец 3
      </th>
    </tr>
  </thead>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
  <tr>
    <td>
      Контент 1
    </td>
    <td>
      Контент 2
    </td>
    <td>
      Контент 3
    </td>
  </tr>
</table>

→ Ссылка
Автор решения: School 
<div class="position-relative">
        <table class="position-fixed left-0 bg-white" style="width:200px"> <!--примерно-->
            <tr>
                <th>row1</th>
            </tr>
            <tr>
                <th>row2</th>
            </tr>
        </table>
        <table class="main-table" style="margin-left:200px">
            <thead class="sticky-top"></thead>
            <!-- без первого столбца -->
        </table>
            
        </table>
    </div>
→ Ссылка
Автор решения: Евгений Кулик

я просто закоментировал часть вашего кода

картинка

jQuery(document).ready(function($) {
    var $table = $('table'),
        $header = $('#header'),
        $thead = $('thead');
    $thead.find('th').each(function() {
        var $newdiv = $('<div />', {
            style: 'width:' + $(this).width() + 'px'
            
        });
        $newdiv.text($(this).text());
        $header.append($newdiv);
    });
    
    var $viewport = $(window);
    
    $viewport.scroll(function() {
        $header.css({
            //left: -$(this).scrollLeft()
        });
        
    });
});
body {
    padding: 0;
    margin: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

#header {
    width: 150%;
    display: block;
    position: fixed;
    background: #fff;
    overflow: hidden;
    z-index: 1;
}

#header div {
    display: table-cell;
    padding: 15px;
    border: 1px solid #ccc;
    border-collapse: collapse;
    font-weight: bold;
}

table {
    width: 150%;
}

thead {
    visibility: hidden;
}

td,
th {
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 15px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header"></div>
<table>
    <thead>
    <tr>
        <th>
            Столбец 1
        </th>
        <th>
            Столбец 2
        </th>
        <th>
            Столбец 3
        </th>
    </tr>
    </thead>
    <tr>
        <td>
            Контент 1
        </td>
        <td>
            Контент 2
        </td>
        <td>
            Контент 3
        </td>
    </tr>
    <tr>
        <td>
            Контент 1
        </td>
        <td>
            Контент 2
        </td>
        <td>
            Контент 3
        </td>
    </tr>
    <tr>
        <td>
            Контент 1
        </td>
        <td>
            Контент 2
        </td>
        <td>
            Контент 3
        </td>
    </tr>
    <tr>
        <td>
            Контент 1
        </td>
        <td>
            Контент 2
        </td>
        <td>
            Контент 3
        </td>
    </tr>
    <tr>
        <td>
            Контент 1
        </td>
        <td>
            Контент 2
        </td>
        <td>
            Контент 3
        </td>
    </tr>
    <tr>
        <td>
            Контент 1
        </td>
        <td>
            Контент 2
        </td>
        <td>
            Контент 3
        </td>
    </tr>
    <tr>
        <td>
            Контент 1
        </td>
        <td>
            Контент 2
        </td>
        <td>
            Контент 3
        </td>
    </tr>
    <tr>
        <td>
            Контент 1
        </td>
        <td>
            Контент 2
        </td>
        <td>
            Контент 3
        </td>
    </tr>
    <tr>
        <td>
            Контент 1
        </td>
        <td>
            Контент 2
        </td>
        <td>
            Контент 3
        </td>
    </tr>
    <tr>
        <td>
            Контент 1
        </td>
        <td>
            Контент 2
        </td>
        <td>
            Контент 3
        </td>
    </tr>
</table>
</body>
</html>

дополнено:

скрипт без JQuery

window.onload = function() {
    let $table = document.querySelector('table');
    let $header = document.querySelector('#header');
    let $thead = document.querySelector('thead');
    
    $thead.querySelectorAll('th').forEach(th => {
        $header.insertAdjacentHTML('beforeend', `<div style="width:${th.clientWidth}px;">${th.textContent}</div>`)
    })
}
→ Ссылка

licensed under cc by-sa 3.0 with attribution.