Можно ли прокручивать содержимое таблицы высот 100%, а не заголовка с помощью CSS и показывать только полосу прокрутки в стороне содержимого tbody, а не строки заголовка? Спасибо!
How To: 100% таблица высоты только Прокрутить тём
Ответ 1
Таблицы - сложный бизнес. Я думаю, вы хотите использовать их для смысловых и резервных целей, но они несколько негибкие.
К счастью, некоторые уже выяснили не один, а 2 хорошие методы достижения прокручиваемых эффектов.... в ~ 2005 году.
http://www.cssplay.co.uk/menu/tablescroll.html
Им по-прежнему нужна дополнительная html-разметка, чтобы сделать ее возможной, а вторая таблица эффективно использует вложенную таблицу, но резервный/обычный HTML выглядит как обычная простая таблица.
Метод # 1
Наружный div с заполнением, чтобы создать "поле" для элементов. Внутренний div, который делает внутреннюю таблицу прокручиваемой. Строка таблицы thead
абсолютно позиционируется, чтобы заставить ее оставаться на вершине тела, то же самое делается с нижним колонтитулом. Поскольку внутренний div равен overflow: auto
, а высота определяет остальные строки таблицы, падающие в линию в области scollable.
Метод # 2
Внешняя таблица - обычная таблица, верхний и нижний колонтитулы - в обычном порядке. Но тень внешней таблицы содержит только одну строку, один столбец и в ней есть другая таблица. Этот столбец имеет определенную высоту и overflow: auto
, поэтому в нем будет прокручиваться возможность (в котором есть только контент).
Ответ 2
Решение javascript должно использовать "плавающие заголовки". Вы помещаете всю таблицу в div с набором переполнения, тогда JavaScript будет клонировать заголовок таблицы и помещать его в начало div, немного как интерфейс Apple.
Пример jQuery http://fixedheadertable.com/
Обратите внимание, что это становится очень сложным, если вы делаете другие вещи в таблице, такие как сортировка на стороне клиента, фильтрация и т.д.
Ответ 3
Надеюсь, еще не слишком поздно, и вы все еще живы, с тех пор многое улучшилось :)
Ты можешь использовать:
table {
display: inline-grid;
grid-template-areas:
"head-fixed"
"body-scrollable";
}
thead {
grid-area: head-fixed;
}
tbody {
grid-area: body-scrollable;
overflow: auto;
height: calc(100vh - 55px);
}
Прокручиваемая таблица (tbody) со 100% высотой и фиксированным заголовком на JSFiddle: http://jsfiddle.net/gengns/p3fzdc5f/
Ответ 4
Невозможно с чистым CSS, насколько я знаю (по крайней мере, не перекрестный браузер), но с использованием плагина jQuery это возможно и очень просто, например. jQuery.FixedTable.
Ответ 5
Вы можете сделать это с помощью гибкого дисплея. Нет необходимости в жестких кодированных размерах.
Здесь пример того, как делать фиксированный заголовок и прокручиваемый контент, используя в таблице. Код:
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Fixed Header in table</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="height: 100%">
<table style="display: flex; height: 100%; flex-direction: column">
<thead>
<tr>
<td>HEADER<br/>------------</td>
</tr>
</thead>
<tbody style="flex: 1; overflow: auto">
<tr>
<td>
<div>
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Для полной реализации Holy Grail (заголовок, нижний колонтитул, nav, side и content), используя гибкий дисплей, перейдите к здесь.
Ответ 6
Если возможно в вашем сценарии, простой альтернативой было бы поместить заголовок в отдельный div и таблицу внутри другого div с высотой apt и применить следующие свойства к div.
overflow-x: hidden;
overflow-y: scroll;
Ответ 7
Матовый, который прост. Вот что вы хотите сделать
CSS
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
html, body{ width: 100%; height: 100%;}
table{
width: 100%;
height: 100%;
background-color: #aaa;
}
tbody{
width: 100%;
height: 100%;
-display: block;
background-color: #ccc;
overflow-y: scroll;
overflow-x: hidden;
}
td{
width: 100px;
height: 200px;
background-color: #eee;
}
</style>
HTML:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Ответ 8
У меня была аналогичная проблема, получая только содержимое под заголовком, чтобы прокручиваться и оставаться на 100% от оставшейся высоты. Вот мое решение:
http://jsfiddle.net/ajkochanowicz/YDjsE/
Это будет работать для более простых случаев использования.
#container {
border: 1px solid red;
width: 200px;
height: 250px; /* This can be any height and everything fills in */
padding-top: 55px;
}
#something-else {
height: 55px;
width: 200px;
background-color: green;
margin-top:-55px;
}
#overflow {
border: 1px solid blue;
width:198px;
overflow-y: auto;
height: 100%;
}
Ответ 9
попробуйте этот файл CSS:
table{
width: 100%;
height: 400px;
background-color: #aaa;
}
tbody{
background-color: #CCCCCC;
display: block;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
td{
width: 100px;
height: 30px;
background-color: #eee;
}
thead {
display: block;
height: 30px;
width: 100%;
}
работает в моем firefox.. не тестировался нигде..:)