Question

我正在尝试使表行具有相同的高度，但表内部的高度小于其他行。当每个表数据的长度改变时，位置也会改变。有什么方法可以使表格行高处于同一水平？

高度：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>

Answer 1

您可以只用一张带有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;
}

演示： https://jsfiddle.net/davidliang2008/2prj96Lq/14/

当<td>中包含另一个表时，如何使所有表行都具有相同的高度

1 个答案: