【发布时间】：2015-05-23 10:32:41
【问题描述】：
我在带有两列的 Bootstrap 面板中嵌入了一个 html 表格。每列内部是另一个表，其中还有两列。每个表都需要独立，因为每个表中的行数可以根据填充它的数据而变化。
无论如何，问题在于，由于第一个表的高度通常比第二个长，因此两个表的顶部通常不会对齐。在您提出建议之前，我已经尝试过使用 div 并使用 bootstrap col 大小的想法，使用表格的主要原因是允许我左对齐示例中的“标题”列，如联系人和地址。
我还尝试了所有我能想到的标签上的各种边框、填充和垂直对齐样式，但没有运气。
代码如下：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"
rel="stylesheet" type="text/css">
</head>
<body style="font-family: Calibri, Helvetica, Arial, sans-serif;" >
<div>
<div >
<div class="row col-md-12" >
<div class="row">
<div class="row col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h4>Contact Details</h4>
</div>
<div class="panel-body" id="contactDetails">
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align:top; padding:4px;">
<label class="control-label">Contact:</label>
</td>
<td style="padding:4px">
<span >John Doe</span>
</td>
</tr>
<tr>
<td style="vertical-align:top; padding:4px;">
<label class="control-label">Address:</label>
</td>
<td style="padding:4px">
<div>
<div class="sp-sm-12">
<span>123 Any Address</span>
</div>
<div class="sp-sm-12">
<span>Address 2</span>
</div>
<div class="sp-sm-12">
<span>ANYTOWN, US 12345</span>
</div>
<div class="sp-sm-12">
<span >United States</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td style="vertical-align:top; padding:4px;">
<label class="control-label"><span>Home phone:</span></label>
</td>
<td style="padding:4px">
<span>
<span data-bind="text: Number()">555-867-5309</span>
</span>
</td>
</tr>
<tr>
<td style="vertical-align:top; padding:4px;">
<label class="control-label"><span>Email:</span></label>
</td>
<td style="padding:4px">
<div >
<span>
<a href="mailto:anyone@anywhere.com">anyone@anywhere.com</a>
</span>
<br>
</div>
</td>
</tr>
<tr>
<td style="vertical-align:top; padding:4px;">
<label class="control-label"><span>Business:</span></label>
</td>
<td style="padding:4px">
<div">
<div class="row">
<span>
<span></span>
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2">
TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING TESTING
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我在这里创建了一个 jsfiddle：https://jsfiddle.net/raedwa01/hxxdjLzn/
这是我所看到的图像。您可以看到家庭电话未与联系人对齐。
我需要做什么来对齐这些？
【问题讨论】：
标签： html css twitter-bootstrap