テーブルを固定

質問

□□□
□□□
上記のように6つのテーブルを作ったとします。
スタイルシートで"<table style="width="200" height="200">のように幅を指定しても
作ったテーブルより小さいサイズの画像を入れただけでも全体が大きく崩れてしまいます。
これをテーブルの幅を幅以下の画像なら（"width="200" height="200"で作った場合は199まで）動かないように完全固定したいのですがどのような方法で可能になるのでしょうか？。

回答No.1

leap_day · ベストアンサー

こんにちは

中身がサイズより大きければ表示が崩れることはありますが小さいときはサイズ指定するとそのサイズになります

崩れる理由はstyleの書き方が間違われているからです（＞＜）

style="width:200px;height:200px"
styleを使うときはpx指定します

<style type="text/css">
.table {
width:200px;
height:200px;
position:absolute;
border:1px solid;
}
</style>
<table class="table" style="top:0px;left:0px;"><tr><td><img src="***.gif"></td></tr></table>
<table class="table" style="top:200px;left:0px;"><tr><td><img src="***.gif"></td></tr></table>
<table class="table" style="top:0px;left:200px;"><tr><td><img src="***.gif"></td></tr></table>
<table class="table" style="top:200px;left:200px;"><tr><td><img src="***.gif"></td></tr></table>
<table class="table" style="top:0px;left:400px;"><tr><td><img src="***.gif"></td></tr></table>
<table class="table" style="top:200px;left:400px;"><tr><td><img src="***.gif"></td></tr></table>

top、leftで位置調整します。んでその表示する位置に↓こういうのを入れてスペース確保します
<div style="height:400px;"></div>

お礼

早速の回答ありがとございます。
まだ試せる場所にはいませんが帰りましたら試したいと思います。