Align two vertical HTML tables

Question

I have two tables vertically stacked on top of each other . There is margin-bottom in place that separates the two .

And currently the code looks like :

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

So basically the tables look like this in UI:

As can be seen two separate tables are stacked on top of each other . What I want is the below table's columns to be vertically inline with those of the top one.

I tried to include a blank <td></td> but that did not work .

Answer 1

User td width in per cent.

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