テーブルを横に二つ並べて表示する方法はありますか？

締切済

質問者：fwjokpskpwjac
質問日時：2014/10/14 22:02
回答数：5件

テーブルを横に二つ並べて表示する方法はありますか？

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>

これだと、縦に２個並んでしまいます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： ORUKA1951
回答日時：2014/10/17 18:52

単純に

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の内容に大きく依存するものです。

- 0
- 件

通報する

No.4

回答者： phantom0112358
回答日時：2014/10/16 10:37

方法はいくつかあります。

他の回答と重複もありますが。
・テーブル入れ子
・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>

- 0
- 件

通報する

No.3

回答者： warez
回答日時：2014/10/15 19:21

table {

display: inline-table;
}

- 0
- 件

通報する

No.2

回答者： torayoshi
回答日時：2014/10/14 23:48

テーブルの入れ子でも実現出来ますが、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;">

- 0
- 件

通報する

No.1

回答者： PXU10652
回答日時：2014/10/14 22:43

「テーブルを横に二つ並べて表示する方法はありますか？」

　美しい技ではないですが、border=0の枠のない透明なテーブルを作り、２つの表をその透明な大きな表に入れてしまう（表の入れ子）という方法があります。

<table>
<tr><td>(１つ目のテーブル)<td>(２つ目のテーブル)</table>

　２つのテーブルの間隔は、テーブル間に空白の列を入れるか、width設定で設定します。