固定ヘッダーと固定最初の列を持つhtmlテーブル(または似たようなもの)を作成する必要があります。
これまで見てきたすべてのソリューションは、JavaScriptまたはjQuery
を使用してscrollTop/scrollLeftを設定しますが、モバイルブラウザーではスムーズに動作しないため、純粋なCSSソリューションを探しています。
私はここで固定列の解決策を見つけました: jsfiddle.net/C8Dtf/20/ .
Webkitブラウザーで動作させるか、いくつかのcss3
機能を使用したいのですが、繰り返しになりますが、スクロールにJavascript
を使用したくありません。
EDIT:これは私が達成したい動作の例です: https://web.archive.org/web/20130829032141/http ://datatables.net/release-datatables/extras/FixedColumns/css_size.html
純粋なCSSを使用して、固定ヘッダーと固定された最初の列の両方を持つテーブルを作成する必要がありましたが、ここでの答えはどれも私が望んでいたものではありませんでした。
position: sticky
プロパティは、Chrome、Firefox、およびEdgeの最新バージョンの上部(最もよく使用したように)と側面への固定の両方をサポートします。これは、overflow: scroll
プロパティを持つdiv
と組み合わせて、ページのどこにでも配置できる固定ヘッダーを持つテーブルを提供できます。
テーブルをコンテナに配置します。
<div class="container">
<table></table>
</div>
コンテナでoverflow:scrollを使用して、スクロールを有効にします。
div.container {
overflow: scroll;
}
position: sticky
を使用してテーブルセルをEdgeに固定し、top
、right
、またはleft
を使用して、固定するEdgeを選択します。
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
最初の列のヘッダーを左に固定するには、次を使用します。
thead th:first-child {
left: 0;
z-index: 1;
}
/* Use overflow:scroll on your container to enable scrolling: */
div {
max-width: 400px;
max-height: 150px;
overflow: scroll;
}
/* Use position: sticky to have it stick to the Edge
* and top, right, or left to choose which Edge to stick to: */
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
/* To have the header in the first column stick to the left: */
thead th:first-child {
left: 0;
z-index: 1;
}
/* Just to display it nicely: */
thead th {
background: #000;
color: #FFF;
}
tbody th {
background: #FFF;
border-right: 1px solid #CCC;
}
table {
border-collapse: collapse;
}
td,
th {
padding: 0.5em;
}
<div>
<table>
<thead>
<tr>
<th></th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
</tr>
</thead>
<tbody>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
</tbody>
</table>
</div>
数日後、これはCSSのみ with position: sticky
プロパティを使用して達成するために可能です。
以下にスニペットを示します。
(jsFiddle: https://jsfiddle.net/hbqzdzdt/5/ )
.grid-container {
display: grid; /* This is a (hacky) way to make the .grid element size to fit its content */
overflow: auto;
height: 300px;
width: 600px;
}
.grid {
display: flex;
flex-wrap: nowrap;
}
.grid-col {
width: 150px;
min-width: 150px;
}
.grid-item--header {
height: 100px;
min-height: 100px;
position: sticky;
position: -webkit-sticky;
background: white;
top: 0;
}
.grid-col--fixed-left {
position: sticky;
left: 0;
z-index: 9998;
background: white;
}
.grid-col--fixed-right {
position: sticky;
right: 0;
z-index: 9998;
background: white;
}
.grid-item {
height: 50px;
border: 1px solid gray;
}
<div class="grid-container">
<div class="grid">
<div class="grid-col grid-col--fixed-left">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
<div class="grid-item">
<p>Hello</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
<div class="grid-item">
<p>P</p>
</div>
</div>
<div class="grid-col grid-col--fixed-right">
<div class="grid-item grid-item--header">
<p>HEAD</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
<div class="grid-item">
<p>9</p>
</div>
</div>
</div>
</div>
互換性について。すべての主要なブラウザで動作しますが、IEでは動作しません。 position: sticky
のポリフィルがありますが、試したことはありません。
これは簡単なことではありません。
次のリンクは、動作するデモへのリンクです。
リンクはlanoxxのコメントに従って更新されました
http://jsfiddle.net/C8Dtf/366/
これらを追加することを忘れないでください:
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>
これを達成する他の方法は見当たりません。 特にcssのみを使用しない
これは多くの経験が必要です。 これが役立つことを願って:)
これらの提案はすべて素晴らしいものであり、すべてですが、ヘッダーまたは列の両方ではなく、どちらか一方のみを修正するか、JavaScriptを使用しています。理由-それは純粋なCSSで実現できるとは思わないからです。理由:
それが可能な場合は、スクロール可能な複数のdivを互いに入れ子にし、それぞれが異なる方向にスクロールするようにする必要があります。次に、テーブルを3つの部分(固定ヘッダー、固定列、および残りのデータ)に分割する必要があります。
いいよしかし、今は問題です-スクロールしたときに一方を配置したままにすることができますが、もう一方は最初のスクロール領域内にネストされているため、スクロール自体が見えなくなるため、固定することはできませんスクリーン。 「ああ、はい」と言いますが、「絶対位置または固定位置を使用してそれを行うことができます」-いいえ、できません。これを行うとすぐに、そのコンテナをスクロールする機能が失われます。それは鶏と卵の状況です-あなたは両方を持つことはできません、彼らはお互いをキャンセルします。
唯一の解決策はjavascriptを使用することだと思います。 3つの要素を完全に分離し、JavaScriptを使用して位置を同期させる必要があります。このページの他の投稿に良い例があります。これも一見の価値があります。
http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
CSSのみを使用した例:
.table {
table-layout: fixed;
width: 500px;
border-collapse: collapse;
}
.header th {
font-family: Calibri;
font-size: small;
font-weight: lighter;
border-left: 1px solid #000;
background: #d0d0d0;
}
.body_panel {
display: inline-block;
width: 520px;
height: 300px;
overflow-y: scroll;
}
.body tr {
border-bottom: 1px solid #d0d0d0;
}
.body td {
border-left: 1px solid #d0d0d0;
padding-left: 3px;
font-family: Calibri;
font-size: small;
overflow: hidden;
white-space: nowrap;
text-overflow: Ellipsis;
}
<body>
<table class="table">
<thead class="header">
<tr>
<th style="width:20%;">teste</th>
<th style="width:30%;">teste 2</th>
<th style="width:50%;">teste 3</th>
</tr>
</thead>
</table>
<div class="body_panel">
<table class="table">
<tbody class="body">
<tr>
<td style="width:20%;">asbkj k kajsb ksb kabkb</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
</tbody>
</table>
</div>
</body>
Jsfiddleにいくつかの変更を加えました。これはあなたがやろうとしていることかもしれません。
タイトルを次のようにハードコーディングしました。
<table id="left_table" class="freeze_table">
<tr class='tblTitle'>
<th>Title 1</th>
<th>Title 2</th>
</tr>
</table>
そして、いくつかのスタイルも追加しました。
.tblTitle{
position:absolute;
top:0px;
margin-bottom:30px;
background:lightblue;
}
td, th{
padding:5px;
height:40px;
width:40px;
font-size:14px;
}
これがあなたが望むものであることを願って:)
ヘッダーと列の両方を修正するには、次のプラグインを使用できます。
2019年7月に更新
最近登場したのは 純粋なCSSソリューション CSSプロパティposition: sticky;
( here に基づいています) )それぞれのTH
アイテムに(親コンテナの代わりに)適用されます
最近、固定のヘッダーグループと固定の最初の列を持つソリューションを作成する必要がありました。テーブルをdivに分割し、jqueryを使用してウィンドウのスクロールをキャプチャしました。
http://jsfiddle.net/TinT/EzXub/2346/
var prevTop = 0;
var prevLeft = 0;
$(window).scroll(function(event){
var currentTop = $(this).scrollTop();
var currentLeft = $(this).scrollLeft();
if(prevLeft !== currentLeft) {
prevLeft = currentLeft;
$('.header').css({'left': -$(this).scrollLeft()})
}
if(prevTop !== currentTop) {
prevTop = currentTop;
$('.leftCol').css({'top': -$(this).scrollTop() + 40})
}
});
Internet Explorer 9 + Chrome + Firefox(Windows)およびSafari(Mac)との2日間の戦いの後、
結果:
HTML:
<thead>
<tr>
<th class="nombre"><%= f.label :cost_center %></th>
<th class="cabecera cc">Personal</th>
<th class="cabecera cc">Dpto</th>
</tr>
</thead>
<tbody>
<% @cost_centers.each do |cc| %>
<tr>
<td class="nombre"><%= cc.nombre_corto %></td>
<td class="cc"><%= cc.cacentrocoste %></td>
<td class="cc"><%= cc.cacentrocoste_dpto %></td>
</tr>
<% end %>
</tbody>
<tfoot>
<tr>
<td colspan="3"><a href="#">Mostrar mas usuarios</a></td>
</tr>
</tfoot>
</table>
CSS:
div.cost_center{
width:320px;
font-size:75%;
margin-left:5px;
margin-top:5px;
margin-bottom: 2px;
float: right;
display: inline-block;
overflow-y: auto;
overflow-x: hidden;
max-height:300px;
}
div.cost_center label {
float:none;
font-size:14px;
}
div.cost_center table{
width:300px;
border-collapse: collapse;
float:right;
table-layout:fixed;
}
div.cost_center table tr{
height:16px;
}
div.cost_center th{
font-weight:normal;
}
div.cost_center table tbody{
display: block;
overflow: auto;
max-height:240px;
}
div.cost_center table thead{
display:block;
}
div.cost_center table tfoot{
display:block;
}
div.cost_center table tfoot td{
width:280px;
}
div.cost_center .cc{
width:60px;
text-align: center;
border: 1px solid #999;
}
div.cost_center .nombre{
width:150px;
}
div.cost_center tbody .nombre{
border: 1px solid #999;
}
div.cost_center table tfoot td{
text-align:center;
border: 1px solid #999;
}
div.cost_center table th,
div.cost_center table td {
padding: 2px;
vertical-align: middle;
}
div.cost_center table tbody td {
white-space: normal;
font: .8em/1.4em Verdana, sans-serif;
color: #000;
background-color: white;
}
div.cost_center table th.cabecera {
font: 0.8em/1.4em Verdana, sans-serif;
color: #000;
background-color: #FFEAB5;
}
/* Use overflow:scroll on your container to enable scrolling: */
div {
max-width: 400px;
max-height: 150px;
overflow: scroll;
}
/* Use position: sticky to have it stick to the Edge
* and top, right, or left to choose which Edge to stick to: */
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
/* To have the header in the first column stick to the left: */
thead th:first-child {
left: 0;
z-index: 1;
}
/* Just to display it nicely: */
thead th {
background: #000;
color: #FFF;
}
tbody th {
background: #FFF;
border-right: 1px solid #CCC;
}
table {
border-collapse: collapse;
}
td,
th {
padding: 0.5em;
}
<div>
<table>
<thead>
<tr>
<th></th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
</tr>
</thead>
<tbody>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
</tbody>
</table>
</div>
ヘッダーフッターを修正する必要があります
同僚と私は、固定ヘッダーでテーブルを装飾するために使用できるAngularディレクティブを提供する新しいGitHubプロジェクトをリリースしました: https://github.com/objectcomputing/ FixedHeader
いくつかのdivを追加するディレクティブを使用して、cssとangularのみに依存します。 jQueryは必要ありません。
この実装は、他のいくつかの実装ほど機能が充実していませんが、単に固定テーブルを追加するだけでよい場合は、これが適切なオプションであると考えられます。
このような何かがあなたのために働くかもしれません...それはおそらくあなたのヘッダー行の列幅を設定する必要があります。
thead {
position: fixed;
}
更新:
あなたが与えた例がCSSだけで可能であるとは確信していません。私が間違っていることを証明してくれる人が欲しいです。 これは私がこれまでに持っているものです 。それは完成品ではありませんが、あなたにとっては出発点になるかもしれません。これがどこにいても役に立つ方向を示してくれることを願っています。
Paul O'Brienによるこの問題に対する優れた解決策を見つけたので、リンクを共有したいと思います。 https://codepen.io/paulobrien/pen/LBrMxa
フッターのスタイルを削除しました:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.intro {
max-width: 1280px;
margin: 1em auto;
}
.table-scroll {
position: relative;
width:100%;
z-index: 1;
margin: auto;
overflow: auto;
height: 350px;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-scroll th,
.table-scroll td {
padding: 5px 10px;
border: 1px solid #000;
}
.table-scroll thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
}
th:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
thead th:first-child {
z-index: 5;
}
別の解決策は、AngularJSを使用することです。 AngularUIモジュールには、列固定と呼ばれる機能をサポートするng-grid
というディレクティブがあります。 100%純粋なCSSではありませんが、他のソリューションでもありません。
位置:chromeの(thead)などの要素や、safariのような他のWebkitブラウザでは、stickyは機能しません。
しかし、それは(th)でうまく動作します
Codepenの例をご覧ください:<https://codepen.io/yogavicky/pen/QReepb>
<div id="cntnr">
<div class="tableHeader">
<table class="table-header table table-striped table-bordered">
<thead>
<tr>
<th>this</th>
<th>transmission</th>
<th>is</th>
<th>coming</th>
<th>to</th>
<th>you</th>
</tr>
</thead>
<tbody>
<tr>
<td>we've got it...</td>
<td>alright you are go</td>
<td>uh, we see the Earth now</td>
<td>we've got it...</td>
<td>alright you are go</td>
<td>uh, we see the Earth now</td>
</tr>
</tbody>
</table>
</div>
<div class="tableBody">
<table class="table-body table table-striped table-bordered">
<thead>
<tr>
<th>this</th>
<th>transmission</th>
<th>is</th>
<th>coming</th>
<th>to</th>
<th>you</th>
</tr>
</thead>
<tbody>
<tr>
<td>we've got it...</td>
<td>alright you are go</td>
<td>uh, we see the Earth now</td>
<td>we've got it...</td>
<td>alright you are go</td>
<td>uh, we see the Earth now</td>
</tr>
</tbody>
</table>
</div>
</div>
#cntnr {
width: auto;
height: 200px;
border: solid 1px #444;
overflow: auto;
}
.tableHeader {
position: fixed;
height: 40px;
overflow: hidden;
margin-right: 18px;
background: white;
}
.table-header tbody {
height: 0;
visibility: hidden;
}
.table-body thead {
height: 0;
visibility: hidden;
}
http://jsfiddle.net/cCarlson/L98m854d/
欠点:固定ヘッダー構造/ロジックは特定のディメンションにかなり依存しているため、抽象化はおそらく実行可能なオプションではありません。
既存の回答はほとんどの人に適していますが、固定ヘッダーの下と最初の(固定)列の右側にshadowsを追加しようとしている人には、実際の例です(純粋なcss):
http://jsbin.com/nayifepaxo/1/edit?html,output
これを機能させるための主なトリックは、::after
を使用して、各td
の最初のtr
のそれぞれの右側に影を追加することです。
tr td:first-child:after {
box-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.05) inset;
content: "";
position:absolute;
top:0;
bottom:0;
right:-15px;
width:15px;
}
すべてを機能させるためにしばらく時間がかかりました(長すぎます...)。