htmlテーブルをhorizantally表示する際の問題

Question

実際には、これらの2つのテーブルをGUI上に水平に表示したいのですが、正しく表示できません。自分のコードを見てください。これら2つのテーブルをどのように水平に表示できますか？ これは私のコードリンクですhttp://jsfiddle.net/Yr7km/

Answer 1

クロスブラウザはありません。正しいの解決策です。私は古代のスタイルコードと一緒に行き、3番目のテーブルに入れます。

速いフィドルは：
http://jsfiddle.net/Yr7km/15/

私はそれをより見やすくするためにいくつかのCSSを追加しました。私は*のHTMLコメントを追加して編集内容をマークしました。

CSSではdisplay: table-somethingです。残念ながら、IEにはこれに問題があります。 w3schools linkフロートで遊んでも問題ありません。

Answer 2

私はCSSでこの

<div id="container"> 
<div id="table1">put your table here</div> 
<div id="table1">put your table here</div> 
<div class="clear">&nbsp;</div> 
</div> 

のようないくつかのことをやっているだろう
#container{ width: 100%;}
#table1{ width: 50%; float: left; display: block;}
#table2{ width: 50%; float: right; display: block;}
.clear{ clear: both;}
これはどのようにレイアウトにあなたのアイデアを与える必要最小限のマークアップとCSSです要素。