css - 我怎样才能让两张 table 并排？

Question

如何让两张 table 并排放置。问题可能会出现，有时一张 table 可能比另一张 table 大它旁边的表格，所以这可能会导致问题并且下面的表格可能不对齐，我想解决。在我制作的演示中，我有四个表，所以我希望它有两个并排的表，如果第二个表的长度更长，那么第三个和第四个表将对齐。这可能吗？

我做了一个 fiddle 演示: http://jsfiddle.net/W382S/

<div id="page-wrap">
<table>
<tr >
<caption>test</caption>
<th>Month</th>
<th>Employee First Name</th>
<th>Employee Last Name</th>
<th>Stars<br/></th>
</tr>

<cfoutput query="shiningStar">
<tr >
<td>##</td>
<td>##</td>
<td>##</td>
<td>##</td>
</tr>
</cfoutput>
</table>
</div>



#page-wrap {
    margin: 50px;
}
p {
    margin: 20px 0; 
}

    table { 
        width: 40%; 
        border-collapse: collapse; 
    }

    tr:nth-of-type(odd) { 
        background: #eee; 
    }
    th { 
        background: #333; 
        color: white; 
        font-weight: bold; 
    }
    td, th { 
        padding: 3px; 
        border: 1px solid #ccc; 
        text-align: center; 
    }

caption {
  background: #dbb768;
  font-weight: bold;
  font-size: 1.1em;
}

Answer 1

首先你不能有重复的id。因此，将所有#page-wrap 更改为类，并使 div 显示:内联 block 或将它们向左浮动。因此，如果表格宽度每行容纳两个表格，它将每行显示两个表格。

这是您要找的东西吗？ : http://codepen.io/nighrage/pen/eHmhn