在多行上并排对齐表
在多行上并排对齐表
提问于 2012-07-31 08:12:42
我正在尝试将10个表格并排对齐，即5行2列。每个表中的行是不同的。我已经使用了float: left并为每个div定义了一个宽度，但它仍然不起作用。
下面是一些示例代码和fiddle
<div style="width:500px;">
<div style="float:left; width:250px">
<h4>Details </h4>
<table border="1px">
<tbody >
<tr>
<td>Id</td>
<td>1234-4524-4591-2545</td>
</tr>
<tr>
<td>Name</td>
<td>Test</td>
</tr>
<tr>
<td>Status</td>
<td>OK</td>
</tr>
<tr>
<td>Step</td>
<td>6</td>
</tr>
<tr>
<td>Date</td>
<td>xxx</td>
</tr>
<tr>
<td>Time</td>
<td>ysa</td>
</tr>
</tbody>
</table>
</div>
<div style="float:left; width:250px">
<div>
<h4>Options</h4>
</div>
<table border="1px">
<tbody>
<tr>
<td>Option 1</td>
<td>OK</td>
</tr>
<tr>
<td>Option 2</td>
<td>OK</td>
</tr>
<tr>
<td>Option 3</td>
<td>OK</td>
</tr>
<tr>
<td>Option 4</td>
<td>OK</td>
</tr>
</tbody>
</table>
</div>
<div style="float:left; width:250px">
<div>
<h4>Schedule</h4>
</div>
<table border="1px">
<tbody >
<tr>
<td>Time</td>
<td>11/12/12 6:30 AM</td>
</tr>
<tr>
<td>Email ID:</td>
<td>gf@abc.com</td>
</tr>
</tbody>
</table>
</div>
<div style="float:left; width:250px">
<div>
<h4>Body</h4>
</div>
<table border="1px">
<tbody>
<tr>
<td>Subject Line</td>
<td>test</td>
</tr>
<tr>
<td>From Address</td>
<td>user@gmail.com</td>
</tr>
<tr>
<td>From Name</td>
<td>Some Name</td>
</tr>
</tbody>
</table>
</div>
<div style="float:left; width:250px">
<div>
<h4>User Settings</h4>
</div>
<table border="1px">
<tbody>
<tr>
<td>Setting 1</td>
<td>false</td>
</tr>
<tr>
<td>Setting 2</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-07-31 12:58:00
下面是正确布局的表格：
http://jsfiddle.net/GfJTd/23/
如果你想让它们的高度相等，你可以：
- 使表高度相同
- 使包含表的div高度相同
- 有一个每行包含两个表的div
Stack Overflow用户
发布于 2012-07-31 08:15:43
尝试设置max-width和mid-width。这些将约束您的表到您想要的大小。有关更多信息，请参阅链接。
http://www.w3schools.com/css/css_dimension.asp
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11731443
复制相关文章
相似问题
腾讯云开发者
