みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

横に並べたテーブル

200×200px程度のテーブルを複数(行数や列数はバラバラです)横に並べたいのですが、とりあえず、
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ページのタイトル</title>
<style type="text/css">
<!--
body{
color:#330000;
background-color:#cc3333;
}
table.a{
background-color:#ffffff;
padding:1px;
border:1px solid #000000;
display:inline;
margin:5px;
}
td.a{
text-align:center;
vertical-align:middle;
border:1px solid #000000;
font-size:small;
padding:1px;
background-color:#ffffff;
}
div.center{
text-align:center;
}
-->
</style>
</head>
<body>
<div class="center">
<table class="a">
<tr><td class="a">AAAAAAAAAA</td></tr>
<tr><td class="a">AAAAAAAAAA</td></tr>
</table>
<table class="a">
<tr><td class="a">BBBBBBBBBB</td></tr>
<tr><td class="a">BBBBBBBBBB</td></tr>
<tr><td class="a">BBBBBBBBBB</td></tr>
</table>
</div>
</body>
</html>
という感じでdisplay:inlineで並べました。
これだとIEでは普通に見えるのですが、Ffだと表示が崩れてしまいました。
どこがいけないのかよくわかりません……。FfやNNでもちゃんと見えるようにしたいのですが、どうすればいいでしょうか。
また、スタイルシートでもっといい他の方法があったら教えていただけると助かります。
よろしくおねがいします。

投稿日時 - 2005-06-12 15:24:41

QNo.1444492

困ってます

質問者が選んだベストアンサー

<table class="a" style="float:left">
<tr><td class="a">AAAAAAAAAA</td></tr>
<tr><td class="a">AAAAAAAAAA</td></tr>
</table>
<table class="a">
<tr><td class="a">BBBBBBBBBB</td></tr>
<tr><td class="a">BBBBBBBBBB</td></tr>
<tr><td class="a">BBBBBBBBBB</td></tr>
</table>

こんにちは、potanです。
table を横に並べるのに、float を使うという手があります。
けれど display:inline が NN4.0 や、I.E.5.0 などでサポートされていないのと同様、float も対応していないブラウザがあるときいています。
他にも方法があるかもしれませんが。。No.1の方がおっしゃるようにtableを入れ子にする、という方法がいちばん簡単で確実かなと思います。

投稿日時 - 2005-06-12 17:07:10

お礼

floatも考えたんですが、いずれにしても、ブラウザの種類やバージョンで対応しているのといないのがあるのって、困っちゃいますね。
見る人は最新のブラウザ使ってね! とある程度割り切るしかないのでしょうか……。
回答ありがとうございました。

投稿日時 - 2005-06-13 09:42:45

ANo.2

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

その他の方法でブラウザ依存が少ないものは、
ページをフレーム分けする方法があります。

並べたいテーブルの数だけフレームに分ける感じです。

投稿日時 - 2005-06-12 21:33:11

お礼

それは考えてもみなかったです。フレームにしたらしたでまたややこしそうな気もするんですが(笑)、ブラウザによる表示の違いはクリアできそうですね。
回答ありがとうございました。

投稿日時 - 2005-06-13 09:44:31

ANo.1

何が崩れて欲しくないのかよくわからないのですが、
テーブルをテーブルの中に入れるのはダメなんでしょうか?

投稿日時 - 2005-06-12 16:14:00

補足

すみません、質問文の中に書き忘れたのですが、「テーブルタグの入れ子」は使いたくないので、できたらそれ以外の方法でお願いします。

投稿日時 - 2005-06-12 16:20:07

お礼

何故かと言うとソースがややこしくなって頭がこんがらかっちゃったからなのですが(笑)、最終手段として考えて見ます。
回答ありがとうございました。

投稿日時 - 2005-06-13 09:39:24

あなたにオススメの質問