Question

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

我制作了一个小提琴演示： 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显示：inline-block或浮动它们。因此，如果表格宽度每行容纳两个表格，则每行显示两个表格。

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

如何将两张桌子并排放置？

1 个答案: