2009-07-04 16 views
8

HTMLテーブル(表形式のデータ)をレイアウトしようとしていますが、Firefox 3.5とChrome 2.0.172(EDITとIE7 - Chromeのようなテーブルをレンダリングする)そうです)。 、テーブルのレイアウトの問題 - FirefoxとChromeとIE7

div#listcontainer { 
    position: relative; 
    float: left; 
    width: 98%; 
    padding: 0; 
    border: 1px; 
    overflow-x: scroll; 
} 

table.tasklist { 
    width: auto; 
    table-layout: auto; 
    border: thin solid; 
    font-size: 9pt; 
    border-collapse: collapse; 
    empty-cells: show; 
} 

col.narrow { 
    min-width: 50px; 
} 
col.wide { 
    min-width: 200px; 
} 

Firefoxでは、テーブルが含むdiv要素よりも広いレンダリング:

私はdivの内側のテーブルを持っている:

<div id="listcontainer"> 
    <table class="tasklist"> 
    <colgroup> 
     <col class="narrow" /> 
     <col class="wide" /> 
     {{ more column definitions here }} 
    </colgroup> 
{{ various code here }} 
    </table> 
</div> 

そして、私はdiv要素やテーブルのCSSを持っていますdivのスクロールバーを使用すると、追加の列にスクロールすることができます(これが目的のアクションです)。しかし、ChromeとIE7は列の最小幅のプロパティを無視し、テーブル全体を包含divに入れます。 はありません。私は何をしたいですか?私は間違って何をしていますか?

EDIT

は私の代わりにCOLGROUPを使用しての thtd要素自体の最小幅の要素を入れて、それはすべての3つのブラウザで期待どおりにレンダリングされます。 Chromeの要素を検査、colsのを使用すると、私はクロムについて知らない

答えて

2

... 計算スタイルはdivの内側に収まるように列の幅をレンダリングしていることを示しているが、私はIE7は、明示的な「幅が必要であることを信じています:auto; "それが「最小幅」を適切に処理するための要素に適用されます。これはmsdnに記載されているようには見えませんが、Google上に表示されるようです。

http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
http://msdn.microsoft.com/en-us/library/ms530820(VS.85).aspx

(また、テーブルやcolgroupsで最小幅の使用に関するいくつかの制約は、あなたが実際に可能ではないかもしれません後にしているので、何があります。)

+0

がで解決しませんこの場合。 –

関連する問題