テーブルを3つ作りました。
テーブルのひとつは大きめで、残り二つは同じ大きさの小さめのテーブルです。
参考レイアウトのように並べたいのですが、cssだけではうまくいきません。
参考レイアウト：+-------------------------------+
| +----------+ +--+ |
| | | |2 | |
| | table1 | +--+ |
| | | +--+ |
| | | |3 | |
| | | +--+ |
| | | |
| | | |
| +----------+ |
| |
| body |
+-------------------------------+
テーブル1の隣にテーブル2とテーブル3を配置する。
テーブル1とテーブル2の上辺は同じ高さに配置する。
テーブル1の高さがテーブル2の高さに満たない場合でも、テーブル3はテーブル2の真下に配置する。
テーブル1とテーブル2(3)をセットとし、画面の真中に配置する。
画面の大きさがテーブル1とテーブル2(3)の横幅を足した値に満たない場合でも、テーブル2はテーブル1の右に配置する。
テーブル1とテーブル2(3)の横幅は指定できない。
現在以下のような状況ですが、スクリプトを使いたくないということと、table3がうまく配置できない問題があります。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div, table {
border-style: solid;
border-width: 1px;
}
th, td {
white-space: nowrap;
}
</style>
<script type="text/javascript">
window.onload = function()
{
var container = document.getElementById("container");
var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");
var table3 = document.getElementById("table3");
//全体を真中寄せにする。
container.style.width = (table1.clientWidth + table2.clientWidth + 10) + "px";
container.style.margin = "auto";
}
</script>
<title>non-title</title>
</head>
<body>
<div id="container">
<table style="float:left;" id="table1">
<tr>
<th>テ</th>
<th>ー</th>
<th>ブ</th>
<th>ル</th>
<th>1</th>
</tr>
<tr>
<td>あ</td>
<td>い</td>
<td>う</td>
<td>え</td>
<td>お</td>
</tr>
<tr>
<td>か</td>
<td>き</td>
<td>く</td>
<td>け</td>
<td>こ</td>
</tr>
</table>
<table id="table2">
<tr>
<th>テ</th>
<th>ー</th>
<th>ブ</th>
<th>ル</th>
<th>2</th>
</tr>
<tr>
<td>あ</td>
<td>い</td>
<td>う</td>
<td>え</td>
<td>お</td>
</tr>
</table>
<table id="table3">
<tr>
<th>テ</th>
<th>ー</th>
<th>ブ</th>
<th>ル</th>
<th>3</th>
</tr>
<tr>
<td>あ</td>
<td>い</td>
<td>う</td>
<td>え</td>
<td>お</td>
</tr>
</table>
</div>
</body>
</html>
