Как сделать так, чтобы все строки таблицы имели одинаковую высоту, когда <td>имеет другую таблицу внутри - PullRequest
Новая
       62

Как сделать так, чтобы все строки таблицы имели одинаковую высоту, когда <td>имеет другую таблицу внутри

0 голосов
/ 04 июля 2019

Я пытаюсь сделать строку таблицы на той же высоте, но высота таблицы внутри меньше, чем у других строк.Положение изменится, когда длина каждой таблицы данных изменилась.Есть ли способы сделать высоту строки таблицы на том же уровне?

height: 100% не работает, я также пробовал padding-bottom: 0.Но все еще не работает.

Image

<tbody>
  <tr>
    <td>TARGET_19283612</td>
    <td style="padding-left: 1rem">John Doe<br>
      399 Briarhill Lane <br> Akron OH 44307<br>
      123-456-7890<br> john.doe@gmail.com
    </td>
    <td style="text-align: center">5</td>
    <td style="padding: 0">
      <div>
        <table class="table table-striped" style="margin: 0">
          <tr style="background: transparent">
            <td>018635013640123401234</td>
          </tr>
          <tr style="background: transparent">
            <td>018635013640123401234</td>
          </tr>
          <tr style="background: transparent">
            <td>380457023456293452435245</td>
          </tr>
          <tr style="background: transparent">
            <td>1351465134135145134274546453645</td>
          </tr>
          <tr style="background: transparent">
            <td>319483148971236947163491234691346193413</td>
          </tr>
        </table>
      </div>
    </td>
    <td style="padding: 0">
      <div>
        <table class="table table-striped" style="margin: 0">
          <tr style="background: transparent">
            <td>5 / 5 / 5 inches</td>
          </tr>
          <tr style="background: transparent">
            <td>5 / 5 / 5 inches</td>
          </tr>
          <tr style="background: transparent">
            <td>5 / 5 / 5 inches</td>
          </tr>
          <tr style="background: transparent">
            <td>5 / 5 / 5 inches</td>
          </tr>
          <tr style="background: transparent">
            <td>5 / 5 / 5 inches</td>
          </tr>
        </table>
      </div>

    </td>
    <td style="padding: 0">
      <div>
        <table class="table table-striped" style="margin: 0">
          <tr style="background: transparent">
            <td>10 lbs 10 oz</td>
            <p></p>
          </tr>
          <tr style="background: transparent">
            <td>10 lbs 10 oz</td>
          </tr>
          <tr style="background: transparent">
            <td>10 lbs 10 oz</td>
          </tr>
          <tr style="background: transparent">
            <td>10 lbs 10 oz</td>
          </tr>
          <tr style="background: transparent">
            <td>10 lbs 10 oz</td>
          </tr>
        </table>
      </div>
    </td>
    <td style="padding: 0">
      <div>
        <table class="table table-striped" style="margin: 0">

          <tr style="background: transparent">
            <td></td>
          </tr>
          <tr style="background: transparent">
            <td>Leave at front door</td>
          </tr>
          <tr style="background: transparent">
            <td></td>
          </tr>
          <tr style="background: transparent">
            <td>Leave at front door</td>
          </tr>
          <tr style="background: transparent">
            <td></td>
          </tr>
        </table>
      </div>
    </td>
    <td style="padding: 0">
      <div>
        <table class="table table-striped" style="margin: 0">
          <tr style="background: transparent; width: 100%;height: 100%; margin: 0">
            <td>Delivered</td>
          </tr>
          <tr style="background: transparent; width: 100%;height: 100%; margin: 0">
            <td>Delivered</td>
          </tr>
          <tr style="background: transparent; width: 100%;height: 100%; margin: 0">
            <td>Delivered</td>
          </tr>
          <tr style="background: transparent; width: 100%;height: 100%; margin: 0">
            <td>Delivered</td>
          </tr>
          <tr style="background: transparent; width: 100%;height: 100%; margin: 0">
            <td>Delivered</td>
        </table>
      </div>
    </td>
  </tr>
</tbody>

1 Ответ

1 голос
/ 04 июля 2019

Вы могли бы сделать это только с одной таблицей с rowspan и colspan. 

<table class="table table-bordered">
    <thead>
        <tr>
            <th rowspan="2">Order #</th>
            <th rowspan="2">Customer Information</th>
            <th rowspan="2">Package(s)</th>
            <th colspan="5">Package Information</th>
        </tr>
        <tr>
            <th>Tracking Number</th>
            <th>Dimensions</th>
            <th>Weight</th>
            <th>Instructions</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="5">12513413</td>
            <td rowspan="5">
                John Doe <br>
                123 street <br>
                Akron OH 44307<br>
                123-456-7890<br>
                john.doe@gmail.com
            </td>
            <td rowspan="5">5</td>
            <td>018635013640123401234</td>
            <td>5 / 5/ 5 inches</td>
            <td>10 lbs 10 oz</td>
            <td></td>
            <td>Delivered</td>
        </tr>
        <tr>
            <td>018635013640123401234</td>
            <td>5 / 5/ 5 inches</td>
            <td>10 lbs 10 oz</td>
            <td>Leave at front door</td>
            <td>Delivered</td>                  
        </tr>
        ...
    </tbody>
</table>

Возможно, вы захотите написать некоторые CSS-коды дляВыровняйте заголовок таблицы по вертикали и горизонтали: 

table.table thead th,
table.table thead td {
    vertical-align: middle;
    text-align: center;
}

table.table tbody th,
table.table tbody td {
    background-color: #eee;
}

enter image description here

демонстрация: https://jsfiddle.net/davidliang2008/2prj96Lq/14/

...