掲示板/スタイルシート質問板/過去ログ/一覧/ みっつのテーブルを画面真中に表示する。

0 名前： NullPo ： 2007/02/06（火） 22:28 ID:Z0FHbpib sub-ii

テーブルを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>

1 名前： くいん ： 2007/02/06（火） 22:28 ID:rbRHv8MX sub-Ds: テーブル２と３を一つのdivに入れて、
テーブル１と、そのdivをfloatで並べる…
という方法はいかがですか？

cssだけでの解決方法ではありませんけれど。

2 名前： NullPo ： 2007/02/06（火） 22:28 ID:Z0FHbpib sub-ii

>>1
こうですか？わかりません。><

<div id="container">

<table id="table1" style="float:left;">
 <tr>
  <th>1</th>
 </tr>
 <tr>
  <td>あ</td>
 </tr>
 <tr>
  <td>か</td>
 </tr>
</table>

<div id="layer" style="float:right;">

<table id="table2">
 <tr>
  <th>2</th>
 </tr>
 <tr>
  <td>あ</td>
 </tr>
</table>

<table id="table3">
 <tr>
  <th>3</th>
 </tr>
 <tr>
  <td>あ</td>
 </tr>
</table>

</div>
</div>

ありがとうございます。table3の配置はうまくいきますね。

3 名前： カヅサツ ◆ThCi95HEzw ： 2007/02/06（火） 22:28 ［URL］ ID:O5hEMlpW sub-r2: > テーブル1とテーブル2(3)の横幅は指定できない。
> スクリプトを使いたくない

以上の条件を満たす、Win IE に対しても可能な方法は、もはや「てーぶるれいあうと」くらいしかないようです。

4 名前： とおりすがり ： 2007/02/06（火） 22:28 ID:UWsZexeD sub-gm: テーブル１の中に２と３も入れてしまえば？
テーブル１の最右列をrowspanでつなげてそこに２と３を入れる。
そうすればJavaScriptもfloatも必要ない。
（これもテーブルレイアウトですかね？）

5 名前： NullPo ： 2007/02/06（火） 22:28 ID:yHkAvB4J sub-.G: >>3
あぁ、うすうす思ってましたが、そうなんですね。
スクリプトを使うよりは幾分かましなので検討します。
ありがとうございました。

>>4
ありがとうございます。
確かにレイアウトが崩れることもなければfloatも使わなくていいですね。
検討します。