两个嵌套表中的顶部对齐问题

Posted 2021-05-04

我有一个包含两个嵌套表的表，我正在努力让两者都正确对齐。每个表中的数据行可能不同。数据是动态的，我永远不会知道每个嵌套表1或2将有多少行。我需要确保标题始终排在最前面。

请参阅示例：https://jsfiddle.net/gbeford/arL48u0p/

<table style="display: table; border-color: grey; width: 100%">
<tr>
    <td style="padding:0; width:50%">
        <table style="display: table; border-color: grey; width: 100%">
            <thead>
                <tr style="background: gray;">
                    <th height="30" valign="bottom" data-key="payername1" data-sortable="" flex-size="default-100"><span>Payer
                            Name</span></th>
                    <th height="30" valign="bottom" data-key="payermethod1" data-sortable="" flex-size="default-100"><span
                            style="float:right;">Payment Method</span></th>
                </tr>
            </thead>
            <tbody>
                <tr style="background-color: #f5f5f5;">
                    <td>Test1</td>
                    <td class="col-ho-select-pymt">
                        <select name="pm1" id="pm1" style="width:85px; font-weight: normal;">
                            <option value="XXX">XXX</option>
                            <option value="YYY">YYY</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Test2</td>
                    <td class="col-ho-select-pymt">
                        <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                            <option value="XXX">XXX</option>
                            <option value="YYY">YYY</option>
                        </select>
                    </td>
                </tr>
                <tr style="background-color: #f5f5f5;">
                    <td>This is a long company name to test</td>
                    <td class="col-ho-select-pymt">
                        <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                            <option value="XXX">XXX</option>
                            <option value="YYY">YYY</option>
                    </td>
                </tr>
                <tr>
                    <td>Testing long name</td>
                    <td class="col-ho-select-pymt">
                        <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                            <option value="XXX">XXX</option>
                            <option value="YYY">YYY</option>
                    </td>
                </tr>
                <tr style="background-color: #f5f5f5;">
                    <td>Testing long name</td>
                    <td class="col-ho-select-pymt">
                        <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                            <option value="XXX">XXX</option>
                            <option value="YYY">YYY</option>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
    <td style="padding:0; width:50%">
        <table style="display: table; border-color: grey; width: 100%">
            <thead>
                <tr style="background: gray;">
                    <th height="30" valign="bottom" data-key="payername1" data-sortable=""><span>Payer Name</span></th>
                    <th height="30" valign="bottom" data-key="payermethod1" data-sortable=""><span style="float:right;">Payment
                            Method</span></th>
                </tr>
            </thead>
            <tbody>
                <tr style="background-color: #f5f5f5;">
                    <td>Test1</td>
                    <td style="float:right;">
                        <select name="pm1" id="pm1" style="width:85px; font-weight: normal;">
                            <option value="XXX">XXX</option>
                            <option value="YYY">YYY</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Test12</td>
                    <td style="float:right;">
                        <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                            <option value="XXX">XXX</option>
                            <option value="YYY">YYY</option>
                        </select>
                    </td>
                </tr>
                <tr style="background-color: #f5f5f5;">
                    <td>This is a long company name to test</td>
                    <td style="float:right;">
                        <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                            <option value="XXX">XXX</option>
                            <option value="YYY">YYY</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

答案

你可以在你的顶级vertical-align: top上使用<tr>获得你想要的结果。试试下面的代码：

<table style="display: table; border-color: grey; width: 100%">
  <tr style="vertical-align: top;">
    <td style="padding:0; width:50%">
      <table style="display: table; border-color: grey; width: 100%">
        <thead>
          <tr style="background: gray;">
            <th height="30" valign="bottom" data-key="payername1" data-sortable="" flex-size="default-100"><span>Payer
                                Name</span></th>
            <th height="30" valign="bottom" data-key="payermethod1" data-sortable="" flex-size="default-100"><span style="float:right;">Payment Method</span></th>
          </tr>
        </thead>
        <tbody>
          <tr style="background-color: #f5f5f5;">
            <td>Test1</td>
            <td class="col-ho-select-pymt">
              <select name="pm1" id="pm1" style="width:85px; font-weight: normal;">
                <option value="XXX">XXX</option>
                <option value="YYY">YYY</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Test2</td>
            <td class="col-ho-select-pymt">
              <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                <option value="XXX">XXX</option>
                <option value="YYY">YYY</option>
              </select>
            </td>
          </tr>
          <tr style="background-color: #f5f5f5;">
            <td>This is a long company name to test</td>
            <td class="col-ho-select-pymt">
              <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                <option value="XXX">XXX</option>
                <option value="YYY">YYY</option>
            </td>
          </tr>
          <tr>
            <td>Testing long name</td>
            <td class="col-ho-select-pymt">
              <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                <option value="XXX">XXX</option>
                <option value="YYY">YYY</option>
            </td>
          </tr>
          <tr style="background-color: #f5f5f5;">
            <td>Testing long name</td>
            <td class="col-ho-select-pymt">
              <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                <option value="XXX">XXX</option>
                <option value="YYY">YYY</option>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="padding:0; width:50%">
      <table style="display: table; border-color: grey; width: 100%">
        <thead>
          <tr style="background: gray;">
            <th height="30" valign="bottom" data-key="payername1" data-sortable=""><span>Payer Name</span></th>
            <th height="30" valign="bottom" data-key="payermethod1" data-sortable=""><span style="float:right;">Payment
                                Method</span></th>
          </tr>
        </thead>
        <tbody>
          <tr style="background-color: #f5f5f5;">
            <td>Test1</td>
            <td style="float:right;">
              <select name="pm1" id="pm1" style="width:85px; font-weight: normal;">
                <option value="XXX">XXX</option>
                <option value="YYY">YYY</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Test12</td>
            <td style="float:right;">
              <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                <option value="XXX">XXX</option>
                <option value="YYY">YYY</option>
              </select>
            </td>
          </tr>
          <tr style="background-color: #f5f5f5;">
            <td>This is a long company name to test</td>
            <td style="float:right;">
              <select name="pm3" id="pm3" style="width:85px; font-weight: normal;">
                <option value="XXX">XXX</option>
                <option value="YYY">YYY</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>

另一答案

我找到了问题的答案。所以不要用这个老学校的css :)

答案vertical-align：top;

以上是关于两个嵌套表中的顶部对齐问题的主要内容，如果未能解决你的问题，请参考以下文章

两个具有不同字体大小的自动布局 UILabel：文本顶部对齐

Android 嵌套片段方法

片段内的LinearLayout总是在顶部留下空白

沿 R 中的底部边缘对齐四个“嵌套”圆圈

垂直自动布局两个视图，动态高度对齐顶部

使用嵌套片段和动画对象