固定テーブルヘッダーでオーバーフロー-xに問題がある

Question

CSSとjQueryで固定テーブルヘッダーを実装する際に問題がありますが、実際問題はCSSだけです。誰かが私が見ているものを見たことがあり、それを修正するために何をしたのだろうかと思います。

まず、コードはここにある：http://billf.org/work/tables/table.html

あり、外部スタイルシートだと、すべてのJSコードは、HTMLファイルの一番下にあります。

このコードは壊れているだけでなく、IE7でもIE8でも、Mozilla/Webkitでは壊れています。私は合計で3つの方法があります。問題が解決したら、すべての問題は解消されることを願っています。

OK。したがって、ウェブページをスクロールすると、ウィンドウのscrollTopが表のトップオフセットよりも大きくなると、ヘッダー行がスティッキーになり、ユーザーがページをスクロールするときに列見出しが表示されます。問題は、thead要素のoverflow-xおよびtext-overflowプロパティが固定されると、もはやそれが尊重されなくなるため、ヘッダー列が吹き飛ばされ、その下のコンテンツに一直線上にないことです。

しかし、固定を固定位置に設定するだけで問題を再現することもできます。これはあたかもtheadが固定位置で表示されたときにoverflow-x：hiddenが尊重されなくなったかのようです。

何が起こっているのか、それを回避する方法についてのお手伝いがあれば幸いです。

事前に感謝します。 --Bill

Answer 1

がこの拡大からセルを防ぐことができます

<th> 
<div style='overflow:auto;width:85px;'>text goes here</div> 
</th> 

このようなすべての目の、内側のdivを置く

か、「ホワイトスペースを取ることができ：nowrap; "プロパティを指定します。