パソコンQ&A

テーブルだと次のような互い違いのレンガ状の表組みはできません。


って、できてるジャンなツッコミは抜きにして、上のテーブルはできてるように見せるトリックを使ってるからできてるんです。

だってトリック使わないと、ね、できてないでしょ。
[ソース]

説明しやすく列番号と数値を書いてみました。

1	2	3
180px		120px
90px	210px
180px		120px

これの真ん中の列（２）の幅って、いくつだと思いますか？
全体幅が180px＋120px＝300px
列（１）は90px、列（３）は120pxだから
300px−90px−120px＝90pxですよね。
ってこのやり取りができない理由なんです。

最初からはっきり90pxって書いてないでしょ。

ブラウザはそこまで計算してくれないんです。
だから列（２）は『定義してない』＝『auto(0px)』と思っちゃうんです。

で、トリックの説明をすると、実は隠れた4行目があるんです。
この行で90px、90px、120pxって書いてあるからブラウザも理解してくれてるというトリックでした。
[ソース]

<col>タグで幅を明記する方法もありますがInternet Explorer 6はできないみたいですね。
[ソース]
Firefox 2、Opera 9はできてます。
Mac9 IE5、MacOSX Safari2 Firefox2 Netscape7 IE5はできる。
WindowsIE7はできない。
ってことはWindowsのIEだけ<col>で互い違いはできない。
互い違いでなければできる。

スタイルシート（CSS）で幅（width）を決めてもダメっぽい。

△上に戻る

ソース

テーブルでレンガ型

△上に戻る

トリックを使って解決

△上に戻る

<col>タグで解決

△上に戻る