Создание липкого заголовка на аде

У меня есть таблица, которая может стать очень длинной на странице, поэтому заголовок теряется, поэтому я подумал, что липкий заголовок исправит это. Вы прокручиваете слишком далеко, и заголовок все еще там, чтобы вы знали, что такое поля.

Я знаю традиционные способы сделать липкий заголовок с jQuery, но я хотел попробовать по-другому с помощью только css.

Я нашел этот в Интернете, и он должен работать, но я не могу заставить его делать то, что он должен.

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 15px;
}

и помощь будет отличной или любые другие трюки css, чтобы помочь в этой работе. [/p >

Я установил jsFiddel над здесь о том, как выглядит моя форма, чтобы вы могли получить хорошее представление о том, что происходит.

Ответ 1

Если в Chrome не существует bug, вы не можете исправить thead напрямую. Поэтому вам нужно зафиксировать его на элементе th:

thead th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background: white;
    z-index: 10;
}

Ответ 2

Посмотрите на этот ответ. Магия находится в position: fixed.

Если вы хотите прыгать с пистолета: рабочий пример здесь

ИЗМЕНИТЬ

Я не думаю, что вы можете сделать это без Javascript. Тем не менее, меня заинтриговала проблема, поэтому я сделал это решение. Он использует обертку div вокруг данных с помощью overflow: scroll.

JSFIDDLE

Ответ 3

Это код, который работал для меня, чтобы создать липкую игру на столе...

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

Ответ 4

У меня была похожая проблема, с той разницей, что мне нужно было выяснить, как заставить ее работать в более сложном случае: проблема, с которой я столкнулся, заключалась в том, как заставить работу слипаться, если на одной странице есть больше таблиц, некоторые из них только один ряд в элемент thead и другие с 2 рядами с th элементами.

Я нашел решение использовать псевдо-классы css first-child и last-child.

Следующий код показывает, как сделать трюк:

// 1st rule:
    thead > :first-child th, thead > :last-child th
    {
        position: sticky;
        z-index: 1;
    }
//2nd rule
    thead > :last-child th
    {
        top: 80px;
    }
//3rd rule
    thead > :first-child th
    {
        top: 50px;
    }

Давайте сосредоточимся на 2-м и 3-м правилах CSS: у вас может возникнуть желание написать их логически упорядоченными как first-child, а затем last-child, но это не будет работать должным образом. В этом решении для правильной работы необходимо поместить последнего потомка 2-го:

thead > :last-child th

ДО первого ребенка, который должен быть записан как 3-е правило:

thead > :first-child th

даже если на первый взгляд кажется нелогичным.

Таким образом, вышеприведенный код является универсальным кодом, который работает, даже если у вас есть 1 или 2 строки в разных элементах thead в таблицах на одной и той же html-странице, потому что правила css применяются браузером сверху вниз и после того, как он заканчивает анализ html-css Содержание вы получаете правильный взгляд ваших элементов. Но если вы инвертируете 2-й и 3-й, он больше не работает, потому что необходимо, чтобы в случае, если он должен был разобрать один-й в thead, 3-е правило должно преодолеть 2-е, чтобы работать должным образом. На самом деле, если у вас есть таблица, в которую вы помещаете только одну строку, у вас могут возникнуть проблемы с использованием только

thead th

или инвертировать 2-е правило с 3-м правилом в моем коде, как

thead > :first-child th {...}
thead > :last-child th {...}

потому что, когда у вас есть одна строка, первый-дочерний элемент одновременно является и последним-дочерним, поэтому браузер делает беспорядок, применяя к нему позицию в 80 пикселей сверху, это не то, что вам нужно.