- 締切済み
テーブルを横に二つ並べて表示する方法はありますか？
テーブルを横に二つ並べて表示する方法はありますか？ 4列のテーブルを作るのではなく、 2列のテーブルを2個並べたいです。 <html> <head> <title>test</title> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> </body> </html> これだと、縦に２個並んでしまいます。
- fwjokpskpwjac
- お礼率69% (25/36)
- HTML
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
単純に table{width:50%;} table+table{position:absolute;top:0;right:0;} table{width:49%;float:left;} table+table:after{content:"";display:block;cleaar:left;} 他にも様々な手法があるでしょう。 どの手法をとるかは、はっきり言って内容によります。 ・ページレイアウトの目的で表を用いる。は論外として 1) 内容的に一つの表なのでしたら<tbody></tbody>を二つ用意する。 2) まったく関連しない表ならfloat 3) 関連するならabsolute 4) 別のセクションに属するものならdivで囲む など、どれが最適かは、tableの内容に大きく依存するものです。
- anonymous（@phantom0112358）
- ベストアンサー率60% (6/10)
方法はいくつかあります。他の回答と重複もありますが。 ・テーブル入れ子 ・style属性でfloat ・divで括ってfloatかdisplay:inline-block 一番スマートなのはdivで括ったスタイリングでしょう。 下記はdisplay:inline-blockで横並びにする例です。 <style> div.table { letter-spacing: -0.4em } div.table > * { letter-spacing: normal } div.table div.column { width: 50% display: inline-block; vertical-align: top; } div.table div.column ~ div.column { marign-left: 20px } </style> <div class="table column"> <div class="column"> 左テーブル </div> <div class="column"> 右テーブル </div> </div>
- warez
- ベストアンサー率57% (29/50)
table { display: inline-table; }
- torayoshi
- ベストアンサー率62% (910/1449)
テーブルの入れ子でも実現出来ますが、CSSの方がスマートでは？ 要素（テーブル）の回り込みはfloatプロパティで。 回り込み解除はclearプロパティ。 テーブルとテーブルの間隔はmarginプロパティで。 <table border=1 cellspacing=1 cellpadding=1 style="float:left;margin-right:20px;"> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> <table border=1 cellspacing=1 cellpadding=1> <tr><td>No</td><td>Destination</td></tr> <tr><td>a</td><td>b</td></tr> </table> <p style="clear:both;">
- PXU10652
- ベストアンサー率38% (777/1993)
「テーブルを横に二つ並べて表示する方法はありますか？」 美しい技ではないですが、border=0の枠のない透明なテーブルを作り、２つの表をその透明な大きな表に入れてしまう（表の入れ子）という方法があります。 <table> <tr><td>(１つ目のテーブル)<td>(２つ目のテーブル)</table> ２つのテーブルの間隔は、テーブル間に空白の列を入れるか、width設定で設定します。
