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=""></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 .
3 Answers
User td width in per cent.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="25%" bgcolor="#FF0004"> </td>
<td width="25%" bgcolor="#0054FF"> </td>
<td width="25%" bgcolor="#000000"> </td>
<td width="25%" bgcolor="#03FF47"> </td>
</tr>
</tbody>
</table>
<br/>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="25%" bgcolor="#410001"> </td>
<td width="25%" bgcolor="#5CFC24"> </td>
<td width="25%" bgcolor="#FFB600"> </td>
<td width="25%" bgcolor="#747474"> </td>
</tr>
</tbody>
</table>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>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>
