ヘッダーが固定され、最初の列が固定された html テーブル (または似たようなもの) を作成する必要があります。
これまでに見たすべてのソリューションは Javascript を使用するかjQuery、scrollTop/scrollLeft を設定しますが、モバイル ブラウザーではスムーズに動作しないため、純粋な CSS ソリューションを探しています。
ここで固定列の解決策を見つけました: jsfiddle.net/C8Dtf/20/しかし、それを拡張してヘッダーも固定する方法がわかりません。
Webkit ブラウザーで動作させたり、いくつかの機能を使用したりしたいのですが、繰り返しますが、スクロールcss3には使用したくありません。Javascript
編集:これは私が達成したい動作の例です: https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html
これは簡単なことではありません。
次のリンクは、動作するデモへのリンクです。
リンクは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 つの部分 (固定ヘッダー、固定列、残りのデータ) に分割する必要があります。
罰金。しかし、今の問題 - スクロール時にそれらの1つをそのままにしておくことができますが、もう1つは最初のスクロール領域内にネストされているため、スクロールされて見えなくなる可能性があるため、その場所に固定することはできませんスクリーン。「ああ、でも絶対位置または固定位置を使用してそれを行うことはできます」とあなたは言いますが、それはできません。これを行うとすぐに、そのコンテナーをスクロールできなくなります。これはニワトリが先か卵が先かという状況です。両方を同時に持つことはできません。互いに相殺されます。
唯一の解決策はJavaScriptを使用することだと思います。3 つの要素を完全に分離し、javascript を介してそれらの位置を同期させる必要があります。このページの他の投稿に良い例があります。これも一見の価値があります。
http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
私は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;
}
これがあなたが望むものであることを願っています:)
最近、固定ヘッダー グループと固定最初の列を使用してソリューションを作成する必要がありました。テーブルを 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})
}
});
同僚と私は、固定ヘッダーでテーブルを装飾するために使用できる Angular ディレクティブを提供する新しい GitHub プロジェクトをリリースしました: https://github.com/objectcomputing/FixedHeader
CSS と angular のみに依存し、いくつかの div を追加するディレクティブがあります。jQuery は必要ありません。
この実装は、他の実装ほど完全な機能を備えていませんが、単に固定テーブルを追加する必要がある場合は、これが適切なオプションであると考えられます。
このようなものがうまくいくかもしれません...おそらく、ヘッダー行の列幅を設定する必要があります。
thead {
position: fixed;
}
アップデート：
あなたが示した例がCSSだけで可能であるとは確信していません。誰かが私が間違っていることを証明してほしい. これが私がこれまでに持っているものです。これは完成品ではありませんが、あなたにとっての出発点になるかもしれません。どこにいても、これが役立つ方向性を示してくれることを願っています。
別の解決策は、AngularJS を使用することです。AngularUI モジュールには、ng-grid列固定と呼ばれる機能をサポートする と呼ばれるディレクティブがあります。これは 100% 純粋な CSS ではありませんが、他のソリューションもそうではありません。
<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/
欠点:固定ヘッダー構造/ロジックは特定の次元にかなり依存しているため、抽象化はおそらく実行可能なオプションではありません。
純粋な HTML と CSS のみを使用したい場合は、問題の解決策があります。
このjsFiddleでは、固定ヘッダーを持つテーブルを提供する非スクリプト ソリューションを確認できます。固定された最初の列にもマークアップを適応させることは問題ではありません。hWrapper-div内の最初の列に絶対位置のテーブルを作成し、 -div の位置を変更するvWrapperだけです。
サーバー側またはブラウザー側の魅力的なエンジンを使用して動的コンテンツを提供することは問題ではありません。私のソリューションは、最新のすべてのブラウザーと IE8 以降の古いブラウザーでうまく機能します。