2009-08-19 5 views
2

私は問題が表1のエントリを有する場合、1つのエントリがFF3に高い500pxなどであるということであるTBODYテーブル上で最大の高さを設定するためのクロスブラウザの方法は何ですか?

#ml_container table>tbody{ height: 500px; overflow: auto; overflow-x: hidden; } 

の高さを設定するテーブルを有します。私は1つのエントリがまだ20px(または私が指定したもの)であることを希望します。別の問題は、Safariはこの500px設定を認識しないため、テーブルに最大高さがないことです。私は一度に500pxの高価値のエントリを表示するスクロール可能なテーブルがほしいのです。これを行う方法に関するアイデア?

答えて

9

固定または最大の高さを任意のテーブル要素に設定することはできません。 The height property is only treated as a minimum height.

あなたはです。は、tbodydisplay: blockを追加します。その場合はもうtable-* display typesの1つではないので、そのになります。しかし、tbodyはもはやtable-row-groupではないので、暗黙的なテーブルで終わることになります。そのため、他のtheadtbodyまたはtfoot要素の列は、スクロール可能なtbodyの列にはなりません。

ただし、列の不一致は別として、のほとんどは、がIE以外のすべての最新ブラウザで機能するようにしています。残りの問題を自分で修正できるはずです。

IEでどのように修正するかわかりません。私は"Pure CSS Scrollable Table with Fixed Header"に出くわしましたが、彼のソリューションの両方がIE6で動作するので、それはむしろ時代遅れですが、IE7とIE8ではひどく壊れています(さまざまな方法で)。彼らはdoはIEのQuirksモードで動作しますが、もしあなたが必死にそれを必要とするならば、あなたの唯一の選択肢かもしれません。

0

Thomが正しいアイデアを持っていました.JavaScriptを使用してください。テーブルのサイズが大きすぎるほどウィンドウが大きければ、テーブル/エレメントに手動で固定された高さを設定します。 :D

関連する問題