Положение на листе

Как вы знаете, position: sticky; приземлился в Webkit (demo). До сих пор я вижу, что это работает только в родительском элементе. Но я хотел бы знать, могу ли я использовать это в прокручиваемом div со столом.

Таким образом, он должен "прослушивать" событие прокрутки div, а не table.

Я знаю, что могу сделать это с помощью javascript и абсолютного позиционирования, но мне было интересно, поддерживает ли это sticky-positioning.

Ответы

Ответ 1

Положение липкое на ж-д работах 2018 года!

В ваших таблицах стилей просто добавьте эту строку:

thead th { position: sticky; top: 0; }

Ваш стол должен будет включать thead и th для этого стиля.

<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
      // your body code
    </tbody>
</table>

Также, если у вас есть несколько строк в thead, вы можете выбрать первую, которая останется липкой:

thead tr:first-child th { position: sticky; top: 0; }

По состоянию на март 2018 года поддержка в современных браузерах практически отсутствует, ссылка: https://caniuse.com/#feat=css-sticky.

За это кредит переходит на @ctf0 (ссылка сделана 3 декабря 2017 г.)

Ответ 2

Если вам нужен только липкий заголовок для хром, тогда вы можете установить position: sticky; top: some_value (top свойство обязательно) для элемента td в элементе thead.

См:

<table border=1>
  <thead>
    <tr>
      <td style='position: sticky; top: -1px;background: red'>Sticky Column</td>
      <td>Simple column</td>
    </tr>
  </thead>

таблица со строгим заголовком

Ответ 3

position: sticky не работает с элементами таблицы (если их атрибут display начинается с table-), поскольку таблицы не являются частью спецификации:

Другие типы макетов, такие как таблицы, "плавающие" поля, рубиновые аннотации, макеты сетки, столбцы и базовая обработка обычного "потокового" содержимого, описаны в других модулях.

Изменить: так как июль 2019 года в соответствии с https://caniuse.com/#feat=css-sticky Firefox поддерживает эту функцию, а в Chrome есть хотя бы поддержка тега <th>.

Ответ 4

Оказывается, он position: sticky работает только в окне, а не в элементе прокрутки.

Я создал контрольный пример с очень длинной таблицей с заголовком таблицы:

h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

div.testTable {
  height: 200px;
  overflow: auto;
}

table.stickyHead thead {
  position: -webkit-sticky;
  top: 0px;
  background: grey;
}

table.stickyHead td,
table.stickyHead th {
  padding: 2px 3px;
}

<h1>Position sticky</h1>
<div class="testTable">
  <table class="stickyHead">
    <thead>
      <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
        <th>column 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

Ответ 5

Внимание:

posotion: sticiky больше не работает в Google Chrome в 2019 году, попробуйте вместо этого использовать фиксированный или отобразить: inline-block

Ответ 6

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

.td.header {
  position: sticky;
  top:0px;
}

Проверьте этот jsfiddle для простого примера.