私は次のようにテーブルをレイアウトしようとしています:
- コンテンツに合わせて自動的にサイズ変更される 2 つまたは 3 つの列
- テーブルの幅に応じてサイズが変更され、その中のテキストが切り捨てられる 1 ～ 4 列
- 3 つのボタンを含み、正確に220 ピクセル幅にしたい 1 つの列
この質問に対する回答のおかげで、かなりうまくいきました。最初の 2 列または 3 列に「最小幅」を設定し、最後の列に「幅」を設定し、中央の列でテキストを div で囲み、td とオンに「最大幅」を設定します。私が設定したdiv width: 100%;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;。Chrome、Firefox、Safari、さらには IE 10 でも問題なく動作します。
この問題は IE7、8、および 9 で発生します。3 つの「ブラウザ」すべてで、中央の div は切り捨てられず、代わりにすべてのテキストに合わせて列の幅を押し出し、テーブルがページよりも広くなります。
IE のテーブルにa を配置しようとしtable-layout: fixed;ましたが、期待したものを取得する代わりに、またはまったく正気なものを取得する代わりに、最後の列の「幅: 220px」を無視して、すべての列に同じ幅が与えられます。tds、そしてすべてがレイアウトされた後、最後の列は 220px に拡張され、テーブルを吹き飛ばします。私の言っていることが理解できない場合は、IE デバッガーで
http://jsfiddle.net/ptomblin/rHJk9/
を参照するか、Chrome または Firefox で「Inspect Element」を参照してください。最後の列の td の「レイアウト」を見ると、コンテンツの幅が 220px であるにもかかわらず、他のすべての列と同じ小さな幅が表示されます。
ライブサイトでは、ボディに「ie8」クラスを配置するのに条件付き<IF IE8>コードを使用していますが、jsfiddle はそれを好まないようです。
私が探しているのは、IE7-9 でも実際のブラウザー (table-layout:fixed なし) と同じようにテーブルを動作させる方法か、少なくとも適合する「十分な」回避策です。 table-layout:fixed の有無にかかわらず、画面上で。
http://imgur.com/44DeZv5には、IE9 でのスクリーン ショットがあります。テーブルの実際の端を示すために赤い線を追加しました。そのテーブルの td にあるボタン バーが、テーブルだけでなく、実際の画面幅を超えて拡張されていることに注意してください。(ブラウザーは 1024x768 に設定され、テーブルは幅 940 ピクセルの .content div 内にあります)
http://imgur.com/0Zielafは、「table-layout: fixed」がない場合の IE9 の外観です。
http://imgur.com/K8Ob6VRは、「table-layout: fixed」のない Chrome での外観です。すべてが画面と表にどのように収まるかに注目してください。それが私が目指しているものです。