表を横並びに表示

Question

WEB画面に表を横並びにして表示したいです。
片方の表を左寄せにして、もう一方をその表の横に左寄せして表示するつもりです。
しかし、以下の記述だと表は左寄せになるのですが、寄せすぎて表が潰れてしまいます。
左寄せ後表のサイズを指定したいのですが上手く実行できません。
どなたか分かる方教えてください。

<table
class="table side">
	<thead>
		<tr>
		<th>テスト</th>
		<th>sample</th>
		<th>テスト2</th>
		<th>sample</th>
	</thead>

table.side {
	float: left;
	width: 50%;
}

Answer 1

まず気がついたことですが、質問の中のHTMLコード2行目の
class="table side" は class="side" だけでよいでしょう。

そして、コメントでのご相談に関しては、確かめていませんが、
cssで、table.leftside{ } と table.rightside{ } を定義しておき、

<!--  親テーブル -->
<table border="0">
<tr>

<td>
<!--  左の子テーブル -->
  <table class="leftside">
    <tr>
      <td> . . . </td>
             :
    </tr>
  </table>

</td>
<td>
<!--  右の子テーブル -->
  <table class="rightside">
    <tr>
      <td> . . . </td>
             :
    </tr>
  </table>

</td>
</tr>
</table>

と、各々の設定のclass属性を埋めれば、効果が働くのではないでしょうか。

Answer 2

ホームページマスタサイトのこの記事のように外枠のテーブルの２つの<dt>タグ内にに二つのテーブルを入れる方法はどうでしょうか。

Comments

[hide09090909]

ご回答ありがとうございます。
教えていただいたサイトの内容を実行した結果、表を横並びにすることはできたのですが、
しかし、もともと表に設定していたスタイル(セルの色/フォントスタイル)が崩れてしまいます。
表に設定したスタイルを維持したまま、横並びにする方法はありますでしょうか？
質問文に明記しておらずにすみません。