Question

我在一个带有两列的Bootstrap面板中嵌入了一个html表。每列内部是另一个包含两列的表。每个表都需要是独立的，因为每个表中的行数可以根据填充它的数据而变化。

无论如何，问题在于，由于第一张桌子的高度通常比第二张桌子长，所以两张桌子的顶部通常不对齐。在你提出建议之前，我之前尝试过div并使用bootstrap col size的想法，并且使用表格的主要原因是允许我保持对齐＆＃34;标题＆＃34;示例中的联系人和地址等列。

我也在我能想到的所有标签上尝试了各种边框，填充和垂直对齐样式，但没有运气。

以下是代码：

    <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/

这是我所看到的形象。您可以看到家庭电话与联系人不一致。

Rendering of HTML

我需要做些什么来协调这些？

Answer 1

如果您向vertical-align: top元素添加td，则应该修复它。

.panel-body td {
    vertical-align: top;
}

https://jsfiddle.net/hxxdjLzn/1/

嵌套的HTML表有两列，td没有对齐

1 个答案: