Таблица с липким заголовком и изменяемым размером столбцов без использования JQuery
Все решения, которые я видел для создания таблицы с липким заголовком и изменяемым размером столбцов, похоже, используют Jquery. Я хочу простое старое решение с использованием CSS, только если это возможно. Если только CSS не возможен, тогда я могу использовать CSS + Javascript, но без JQuery, пожалуйста.
Я нашел отдельные решения для липкого заголовка и отдельные решения для столбцов с изменяемым размером, но не полное решение для обоих. Кто-нибудь может помочь? Единственное, чего не хватает в моей таблице попыток tbody, это display:block чтобы полоса прокрутки работала, но это все испортило. Моя попытка:
table{
display:block;
background-color:cyan;
height:300px !important;
}
th, td {
min-width: 25px;
resize: horizontal;
overflow: auto;
}
tbody {
height: 30px !important;
background-color:green;
width: 100%;
font-size: 1.45vmin;
overflow-y: scroll;
}
<div style="height:30px;background-color:red;">
<table>
<thead>
<tr><td>header1</td><td>header2</td><td>header3</td><td>header4</td><td>header5</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
</tbody>
</table>
</div>
Ответы
Ответ 1
Вот решение, использующее атрибут CSS position: sticky с resize: horizontal.
Заголовки таблиц изменяемого размера будут отображаться в правом нижнем углу в виде небольшого значка, который вы можете выбрать и изменить. (Из-за ошибки в Chrome она может быть настолько маленькой, что вы едва можете ее увидеть... так что присмотритесь.)
<html>
<style>
.fixed_headers {
border-collapse: collapse;
width:100%;
}
.fixed_headers td,
.fixed_headers thead th {
padding: 5px;
text-align: left;
}
.fixed_headers thead, textarea {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
position: relative;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
.fixed_headers thead th {
position: sticky;
top: 0; /* REQUIRED: https://stackoverflow.com/a/43707215 */
background-color: #333;
z-index: 10;
resize: horizontal;
overflow: auto;
min-width: 70px;
}
</style>
<div style="height: 300px;overflow: auto;">
<table class="fixed_headers">
<thead>
<tr><th>header 1</th><th>header 2</th><th>header 3</th><th>header 4</th><th>header 5</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
</tbody>
</table>
</div>
</html>
Ответ 2
Для CSS изменяемого размера столбцов вы можете использовать этот трюк. Злоупотребление функцией изменения размера текстового поля webkit. Оберните заголовки заголовков в текстовые области только для чтения и в качестве заголовков, просто оставьте большой палец для изменения размера. Используйте min-max-width для того же, чтобы отключить вертикальное изменение размера. Это просто доказательство работы. Играть с этим.
<html>
<style>
.fixed_headers {
border-collapse: collapse;
}
.fixed_headers textarea {
text-decoration: underline;
}
.fixed_headers textarea,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers textarea,
.fixed_headers td {
min-width: 100px;
}
.fixed_headers thead, textarea {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
position: relative;
}
.fixed_headers tbody {
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
textarea {
border: none;
min-height: 16px;
max-height: 16px;
}
</style>
<div style="height: 300px;overflow: auto;">
<table class="fixed_headers">
<thead>
<tr><th><textarea readonly>header 1</textarea></th><th><textarea readonly>header 2</textarea></th><th><textarea readonly>header 3</textarea></th><th><textarea readonly>header 4</textarea></th><th><textarea readonly>header 5</textarea></th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
</tbody>
</table>
</div>
</html>
Демо- версия http://jsfiddle.net/rft8v4sp/1/
Ответ 3
Единственное, что вам действительно нужно, это position: sticky; на коллекторной th. Это в сочетании с вашим resize: horizontal исправит вашу проблему, если я правильно понял ваш вопрос.
table {
display: block;
background-color: cyan;
height: 200px !important;
overflow-y: scroll;
}
thead th {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
th,
td {
resize: horizontal;
overflow: auto;
min-width: 25px;
}
td {
font-size: 1.45vmin;
}
tbody {
height: 30px !important;
background-color: green;
width: 100%;
}
<div style="height:30px;background-color:red;">
<table>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
Ответ 4
Для фиксированного заголовка я использовал position: sticky а для прокрутки я использовал контейнер, чтобы имитировать прокрутку tbody (фактически, это tbody, который прокручивает) и избегать отображения блока на столе или его tbody, что сделало бы его несколько дисфункциональным.
В любом случае, позиция закрепления имеет больше поддержки, чем изменение размера, поэтому с обязательным изменением размера она относительно безопасна.
https://caniuse.com/#search=sticky
https://caniuse.com/#search=resize
Я несколько раз пытался отредактировать этот пост, чтобы опубликованный код работал здесь на SO, но безрезультатно, поэтому я сделал для вас публичный JsFiddle, с которым можно поиграть: https://jsfiddle.net/Erik_J/xzhpdqLo/
(@Sølve Tornøe, я не знал о вашем сообщении до того, как отправил. Ушел на несколько часов и пропустил обновление перед публикацией. Таким образом, вы были первым, кто дал верное решение.)
div {
position: relative;
margin: auto;
outline: 1px solid #000;
outline-offset: -1px;
max-width: 900px;
max-height: 300px;
overflow-y: scroll;
}
table{
width: 100%;
border-collapse: collapse;
}
thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
resize: horizontal;
overflow: auto;
background: #cff;
}
th, td {
padding: 5px 10px;
border: 1px solid #000;
}
th {
text-transform: capitalize;
}
<div>
<table>
<thead>
<tr><th></th><th>header 1</th><th>header 2</th><th>header 3</th><th>header 4</th></tr>
</thead>
<tbody>
<tr><th>header 1</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 2 2222</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 3</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 4</th><td>1</td><td>2</td><td>3 3333333 3333333 3333333</td><td>4</td></tr>
<tr><th>header 5</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 6</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 7</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 8</th><td>1</td><td>2 2222 2222 2222</td><td>3</td><td>4</td></tr>
<tr><th>header 9</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 10</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 11</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 12</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 13</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 14</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 15</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><th>header 16</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</tbody>
</table>
</div>
