CODEWITHSUNDEEP
htmlcssangularjs
StrugglingCoder
StrugglingCoder

Reputation: 5021

Align two vertical HTML tables

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:

enter image description here

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 .

Upvotes: 3

Views: 12268

Answers (3)

Mathijs Rutgers
Mathijs Rutgers

Reputation: 815

What you could do is change the table-layout to fixed, so your layout gets more predictable. Then add a colspan to your last td element.

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>

Upvotes: 3

Alex Gant
Alex Gant

Reputation: 321

You can use 1 table tag with several tbody tags in it. It is a good solution. Margins between tables you can manage by 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>

Upvotes: 3

Santosh Khalse
Santosh Khalse

Reputation: 12710

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>

Upvotes: 5

Related Questions