How to make all table row in same height when a <td> has another table inside it

Question

I am trying to make the table row at same height, but the table inside is smaller height than the other rows. The position will change when the length of each table data changed. Is there any ways to make table row height at same level?

height: 100% is not working, I also tried padding-bottom:0. But still not working.

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>

Answer 1

You could have done it with just one table with rowspan and 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>

You might want to write some CSSs to vertically and horizontally align the table header:

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;
}

demo: https://jsfiddle.net/davidliang2008/2prj96Lq/14/