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を使用してのth
と
td
要素自体の最小幅の要素を入れて、それはすべての3つのブラウザで期待どおりにレンダリングされます。 Chromeの要素を検査、colsのを使用すると、私はクロムについて知らない
がで解決しませんこの場合。 –