大きなテーブルかかわら

Question

UPDATEスクロールするとき、私は上に私のHTMLテーブルヘッダーが常に表示したい：提案された解決策以下のスティッキテーブルの列ヘッダーをachiveするだけでHTMLやCSS、すべてで任意のスクリプトを使用していませんが。 これは重複していません。

てみてください「実行コードスニペット」あなたはIEやFirefoxでない限り（してください - 。これをサポートしないしかし、彼らはエラーなしで正常に低下、ない粘着性のヘッダが現れていない重要な単一ありません。 JavaScriptコードの行が壊れることがあります）。

列ヘッダーが表示されない大規模なHTML表をスクロールすると、列ヘッダーが各行値の上にウィンドウの上部に表示され、各表セルのコンテンツタイプが明らかです。この機能はユーザビリティにとって非常に重要です。

---

これはQ /スタイルの質問です。

この質問はこれまでに多くの登場人物に出てきましたが、この "スクリプトレスソリューション"は前に投稿されていません。以下はちょうどHTMLとCSSのみで動作するようです - スクリプトは全く必要ありません。。 IE/FireFoxはサポートされていません。それ以外の場合、すべての最新バージョンのブラウザで動作するようです。

関連する以前の投稿が見つかりませんでした。私はHTMLタグを定期的にフォローしません。私はちょうど私が遭遇したものが他人のために役立つことができるかどうかをチェックしたい。私は経験豊富なHTML開発者ではありません。

Answer 1

あなたはIEまたはFirefoxを使用してない場合は、直接以下「実行コードスニペット」をクリックしてみてください - 私はそれはあなたがすべてのせせらぎせずに「知る」ために必要なすべてを表示すると思います。 JavaScriptを一切使わずにスティッキーテーブルヘッダーです。ちょうどCSS/HTML。

---

私はJavaScriptの、jQueryのと高度なCSSに基づいてスティッキーHTMLテーブルの列ため多くの複雑なソリューションを見てきました。これらはおそらく非常に優れており、いくつかのブラウザでうまく動作しますが、以下のアプローチはIE11やFireFoxを除くすべての最新のブラウザでネイティブにサポートされています。対処する複雑さはありません。

2つのテーブルを順に使用することを頻繁にお勧めします。最初のテーブルは固定値で列の値のみを表示し、2つ目のテーブルはその列見出しを隠し、値の行のみを表示します。これはかなりclunkyようです。

私はいくつかの他のアプローチも見てきました。以下のテストの私の限られたに基づいて

---

はありません（エッジの最新バージョン、クロム、オペラとヴィヴァルディに動作しますが、ないでIEまたはFireFoxのエラーが表示されます、ちょうど粘着性のヘッダーがないでしょう - それは正常に劣化します）。私は、互換性を正確に検証できるだけの十分なテストリソースを用意していません。重要なことに、JavaScriptコードを1行に分割することはできません。

この「ソリューション」の中核は、このCSSエキスです：

th { 
    position: sticky; 
    top: 0px; 
} 

親のdivの上の境界（top: 0px）に、テーブルヘッダーセル<th>スティックを行いますと、これは明らかであると思われます最近のブラウザのバージョンではスティッキーカラムヘッダーを達成するために必要なことすべて

さらに、フロー内にそれぞれ独自のテーブルを持つ複数のdivを置くこともできますし、同じdivに複数のテーブルを置くこともできます。自動的にOKになるようです。

ソートが有効な大規模なテストテーブルがあります。ソートは、スティッキーヘッダーをクリックしても正常に動作します。

以下のサンプルは、全体のアプローチの適切なテストを実装しようとしている最中に、最小限に抑えられています。私は適切なtheadセクションとtbodyセクション（この簡単なサンプルでは除外されています）を使って長いテーブルで2番目の答えを投稿します。

#testdiv { 
 
background-color: wheat; 
 
height: 180px; 
 
width: 600px; /* Try commenting this out as well */ 
 
overflow: scroll; 
 
} 
 

 
th { 
 
/* The two core settings for sticky table headers */ 
 
position: sticky; 
 
top: 0px; 
 

 
/* A few more settings for better display*/ 
 
background-color: purple; 
 
color: white; 
 
white-space: nowrap; 
 
border: 1px solid black; 
 
text-align: left; 
 
} 
 

 
table, td { 
 
border-collapse: collapse; 
 
border: 1px solid black; 
 
white-space: nowrap; /* Try commenting this out as well */ 
 
}

<div id="testdiv"> 
 

 
<p>Just a leading paragraph for demonstration.</p> 
 
<p>Scroll down and sideways to check the sticky table headers.</p> 
 

 
<table id='testtable'> 
 
    <tr> 
 
     <th>This is the first column:</th> 
 
     <th>Column Two:</th> 
 
     <th>Third in line here:</th> 
 
    </tr> 
 
    <tr> 
 
     <td>A summer night a long time ago I saw a fox chase a firefly.</td> 
 
     <td>A winter night a long long time ago, I watched the aurora borealis dance in the sky.</td> 
 
     <td>Hello world.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>What is your favorite color?</td> 
 
     <td>Time's Arrow.</td> 
 
     <td>Just a short while ago I was young.</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3">This is a colspan.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Live long and prosper.</td> 
 
     <td>Kosmonaut.</td> 
 
     <td>What is the airspeed velocity of an unladen swallow?</td> 
 
    </tr> 
 
    <tr> 
 
     <td>A base in space, just to protect the human race.</td> 
 
     <td>Unimatrix Zero.</td> 
 
     <td>Are there any women here?</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Raven.</td> 
 
     <td>Beware, here be dragons.</td> 
 
     <td>Timeless.</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Astronaut.</td> 
 
     <td>42</td> 
 
     <td>HTML and CSS, the fiddliest of endeavours.</td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="3">This is rowspan.</td> 
 
     <td>Oh my God.</td> 
 
     <td>777</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Holy Crap.</td> 
 
     <td>778</td> 
 
    </tr> 
 
    <tr> 
 
     <td>The neighbour of the beast.</td> 
 
     <td>668</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td colspan="2" rowspan="2">This is colspan and rowspan.</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Three</td> 
 
     <td>Columns</td> 
 
     <td>Here</td> 
 
    </tr> 
 

 
</table> 
 

 
<p>A trailing paragraph for demonstration.</p> 
 
<p>A trailing paragraph for demonstration.</p> 
 
<p>A trailing paragraph for demonstration.</p> 
 
<p>A trailing paragraph for demonstration.</p>  
 
<p>A trailing paragraph for demonstration.</p> 
 

 
</div>