Основные проблемы выравнивания в двух вложенных таблицах

Question

У меня есть таблица с двумя вложенными таблицами, и я изо всех сил пытаюсь заставить обе выровняться правильно. Строки данных могут быть разными в каждой таблице. Данные являются динамическими, и я никогда не узнаю, сколько строк будет в каждой вложенной таблице 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>

Answer 1

Я нашел ответ на свой вопрос. Так что не надо делать эту старую школу CSS :)

ответ выравнивание по вертикали: верх;

Answer 2

Вы можете получить желаемый результат, используя 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>