У меня есть таблица, которая может стать очень длинной на странице, поэтому заголовок теряется, поэтому я подумал, что липкий заголовок исправит это. Вы прокручиваете слишком далеко, и заголовок все еще там, чтобы вы знали, что такое поля.
Я знаю традиционные способы сделать липкий заголовок с jQuery, но я хотел попробовать по-другому с помощью только css.
Я нашел этот в Интернете, и он должен работать, но я не могу заставить его делать то, что он должен.
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
и помощь будет отличной или любые другие трюки css, чтобы помочь в этой работе. [/p >
Я установил jsFiddel над здесь о том, как выглядит моя форма, чтобы вы могли получить хорошее представление о том, что происходит.
Если в Chrome не существует bug, вы не можете исправить thead напрямую. Поэтому вам нужно зафиксировать его на элементе th:
thead th {
position: sticky;
position: -webkit-sticky;
top: 0;
background: white;
z-index: 10;
}
Посмотрите на этот ответ. Магия находится в position: fixed.
Если вы хотите прыгать с пистолета: рабочий пример здесь
ИЗМЕНИТЬ
Я не думаю, что вы можете сделать это без Javascript.
Тем не менее, меня заинтриговала проблема, поэтому я сделал это решение. Он использует обертку div вокруг данных с помощью overflow: scroll.
Это код, который работал для меня, чтобы создать липкую игру на столе...
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;
}
У меня была похожая проблема, с той разницей, что мне нужно было выяснить, как заставить ее работать в более сложном случае: проблема, с которой я столкнулся, заключалась в том, как заставить работу слипаться, если на одной странице есть больше таблиц, некоторые из них только один ряд в элемент 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 пикселей сверху, это не то, что вам нужно.