对齐两个垂直HTML表

Question

我有两张桌子垂直堆叠在一起。有margin-bottom来区分两者。

目前代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table class="....">
  <thead>
    <tr>
      <th class="...."></th>
      <th>
        <a href="#list-table" class="....">
          <span class="...">Batch Queue</span>
          <span class="..."></span>
        </a>
      </th>
      <th>
        <a href="#list-table" class="...">
          <span class="...">Start Date</span>
          <span class="..."></span>
        </a>
      </th>
      <th>
        <a href="#list-table" class="...">
          <span class="...">Status</span>
          <span class="..."></span>
        </a>
      </th>
      <th>
        <a href="#list-table" class="...">
          <span class="...">Est Time to Complete</span>
          <span class="..."></span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="batch in vm.batches | filter : {completion_status:'!'+'100'}">
      <td ng-class="batch.completion_status === '100' ? 'table-status-ok' : (batch.completion_status > '60' ? 'table-status-warning' : 'table-status-error')"></td>
      <td class="..."><a href="javascript:void(0);">{{batch.batch_queue_name}}</a>
      </td>
      <td class="...">{{batch.start_date}}</td>
      <td class="...">
        <div class="progress-bar">

        </div>
      </td>
      <td class="...">{{batch.end_date}}</td </tr>
  </tbody>
</table>

<table class="...">
  <thead>
    <tr>
      <th class="..."></th>
      <th>
        <a href="#list-table" class="...">
          <span class="...">Completed Batches</span>
          <span class="..."></span>
        </a>
      </th>
      <th>
        <a href="#list-table" class="...">
          <span class="...">Start Date</span>
          <span class="..."></span>
        </a>
      </th>
      <th>
        <a href="#list-table" class="...">
          <span class="...">Completed Date</span>
          <span class="..."></span>
        </a>
      </th>
      <th>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="batch in vm.batches | filter : {completion_status:'100'}">
      <td class="table-status-ok"></td>
      <td class="..."><a href="javascript:void(0);">{{batch.batch_queue_name}}</a>
      </td>
      <td class="...">{{batch.start_date}}</td>
      <td class="...">{{batch.end_date}}</td>
      <td></td>
    </tr>
  </tbody>
</table>

所以基本上这些表在UI中看起来像这样：

可以看出，两个独立的桌子堆叠在一起。我想要的是下表中的列与最上面的列垂直内联。

我尝试添加空白<td></td>，但这不起作用。

Answer 1

用户td宽度百分比。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="25%" bgcolor="#FF0004">&nbsp;</td>
      <td width="25%" bgcolor="#0054FF">&nbsp;</td>
      <td width="25%" bgcolor="#000000">&nbsp;</td>
      <td width="25%" bgcolor="#03FF47">&nbsp;</td>
    </tr>
  </tbody>
</table>
<br/>
<br>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="25%" bgcolor="#410001">&nbsp;</td>
      <td width="25%" bgcolor="#5CFC24">&nbsp;</td>
      <td width="25%" bgcolor="#FFB600">&nbsp;</td>
      <td width="25%" bgcolor="#747474">&nbsp;</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以做的是将表格布局更改为固定，以便您的布局更具可预测性。然后在最后一个td元素中添加一个colspan。

table {
    width: 100%;
    table-layout: fixed;
}

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td colspan="2">3</td>
    </tr>
</table>

Answer 3

您可以在其中使用带有多个tbody标签的1个表格标签。 这是一个很好的解决方案。您可以通过CSS管理的表之间的边距。

<table>
    <tbody> <!-- table 1 -->
        <tr>
            <th>header 1</th>
            <th>header 2</th>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>

    <tbody> <!-- table 2 -->
        <tr>
            <th>header 1</th>
            <th>header 2</th>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>