[解決済み] htmlテーブルのみ最上段をフリーズさせる（テーブルヘッダーの固定スクロール）

質問

htmlのテーブルで、最上段が凍結された状態（縦にスクロールしたときに常に見える状態）にしたいのですが、どうすればよいですか？

javascriptを使わずにこれを実現する賢い方法はないでしょうか？

なお、左カラムのフリーズは必要ありません。

解決方法は？

これは固定ヘッダースクロールと呼ばれています。いくつかの方法が紹介されています。

http://www.imaputz.com/cssStuff/bigFourVersion.html

特にクロスブラウザをサポートしたい場合は、JavaScriptなしでは効果的にこれを実現することはできないでしょう。

特にクロスブラウザー/バージョンサポートに関しては、どのようなアプローチを取っても、多くの難問があります。

編集する

修正したいのがヘッダーではなく、データの1行目であっても、考え方は同じです。どちらを指しているのか100%ではありませんでした。

追加考察 私は会社から、IE7+、Firefox、Chromeで機能するこの解決策を研究するよう命じられました。

何度も何度も試行錯誤を繰り返した結果、ある根本的な問題に行き着いたのです。なぜなら、ほとんどのソリューションでは、2つの別々のテーブルを使用し、1つはヘッダー用で、データを含む2つ目のテーブルの上に浮かんで固定されるため、固定ヘッダーを得るためには、固定高さ/幅のカラムを実装する必要があるからです。

//float this one right over second table
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</table>

<table>
//Data
</table>

tbodyタグとtheadタグを利用する方法もありますが、IEがtbodyにスクロールバーを付けることを許可しないため、高さを制限することができません（とても愚かなIMOです）。

<table>
  <thead style="do some stuff to fix its position">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  </thead>
  <tbody style="No scrolling allowed here!">
     Data here
  </tbody>
</table>

この方法には多くの問題があります。たとえば、正確なピクセル幅を確保することです。テーブルというのはとてもかわいいもので、ブラウザによって計算に基づいて異なるピクセルが割り当てられ、すべてのケースで完璧な分布になることは（AFAIK）単純に保証できないからです。テーブルの中にボーダーがある場合、それは非常に明白になります。

私は別のアプローチで、この保証ができない以上、テーブルなんていらない、と言いました。テーブルを模倣するために、divを使用しました。これも行と列の位置の問題があります（主にフローティングの問題で、IE7ではインラインブロックが使えないため、絶対位置決めで適切な位置に配置することになりました）。

私のと非常に似たアプローチのSlick Gridを作った人がいて、これを実現するための良い（複雑ではあるが）例として使うことができる。

https://github.com/6pac/SlickGrid/wiki