使用HTML创建两个并排的表

Question

我知道已经有人问过如何在HTML中并排创建两个表。
但这些答案并不能解决我的问题。

我已经知道我们可以使用:
display: inline-block或
float: left

但是在我的情况下，表中的单元格数量太多，第二个表移动到第一个表下面。
我的小提琴
http://jsfiddle.net/vyzmgews/1/

<table border=1 style="display: inline-block">
<tr>
<td>Cell1 content</td>
<td>Cell2 content</td>
<td>Cell3 content</td>
<td>Cell4 content</td>
<td>Cell5 content</td>
<td>Cell6 content</td>
<td>Cell7 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
</tr>
</table>
<table border=1 style="display: inline-block">
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>

如何保持两个表并排与滚动条。

Answer 1

您可以将两个表包装在一个div中，并为它定义display: flex。

工作的例子:

.table-wrapper {
display: flex;
}

<div class="table-wrapper">
<table border=1>
<tr>
<td>Cell1 content</td>
<td>Cell2 content</td>
<td>Cell3 content</td>
<td>Cell4 content</td>
<td>Cell5 content</td>
<td>Cell6 content</td>
<td>Cell7 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
</tr>
</table>
<table border=1>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
</div>

Answer 2

您可以简单地将它们包装在另一个(无边界)表中:

<table>
<tr>
<td>
<table border=1 class="inlineTable">
<tr>
<td>Cell1 content</td>
<td>Cell2 content</td>
<td>Cell3 content</td>
<td>Cell4 content</td>
<td>Cell5 content</td>
<td>Cell6 content</td>
<td>Cell7 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
<td>Cell8 content</td>
<td>Cell9 content</td>
</tr>
</table>
</td>
<td>
<table border=1 class="inlineTable">
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 3

你能试一下这段代码吗?我不确定这是你所期望的。

<div class="row">
<table border=1 class="inlineTable">
<tr>
<th>Cell1 topic</th>
<th>Cell1 topic</th>
<th>Cell1 topic</th>      
</tr>
<tr>
<td>Cell1 content</td>
<td>Cell1 content</td>
<td>Cell1 content</td>
</tr>
</table>
<table border=1 class="inlineTable">
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>

或者你可以为它添加2列网格