- ベストアンサー
横に並べたテーブル
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でもちゃんと見えるようにしたいのですが、どうすればいいでしょうか。 また、スタイルシートでもっといい他の方法があったら教えていただけると助かります。 よろしくおねがいします。
- ororonchou
- お礼率69% (156/225)
- HTML
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<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を入れ子にする、という方法がいちばん簡単で確実かなと思います。
その他の回答 (2)
- t140
- ベストアンサー率39% (59/150)
その他の方法でブラウザ依存が少ないものは、 ページをフレーム分けする方法があります。 並べたいテーブルの数だけフレームに分ける感じです。
お礼
それは考えてもみなかったです。フレームにしたらしたでまたややこしそうな気もするんですが（笑）、ブラウザによる表示の違いはクリアできそうですね。 回答ありがとうございました。
- Bonjin
- ベストアンサー率43% (418/971)
何が崩れて欲しくないのかよくわからないのですが、 テーブルをテーブルの中に入れるのはダメなんでしょうか？
お礼
何故かと言うとソースがややこしくなって頭がこんがらかっちゃったからなのですが（笑）、最終手段として考えて見ます。 回答ありがとうございました。
補足
すみません、質問文の中に書き忘れたのですが、「テーブルタグの入れ子」は使いたくないので、できたらそれ以外の方法でお願いします。
お礼
floatも考えたんですが、いずれにしても、ブラウザの種類やバージョンで対応しているのといないのがあるのって、困っちゃいますね。 見る人は最新のブラウザ使ってね！ とある程度割り切るしかないのでしょうか……。 回答ありがとうございました。