对齐两个垂直HTML表格

我有两个垂直堆叠在一起的表格。有两个分开的margin-bottom。对齐两个垂直HTML表格

与目前的代码如下所示：

<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>但没有奏效。

来源

2017-01-06 StrugglingCoder

将特定宽度添加到td或宽度：25％;对于4等分列 –

您需要明确指定列的宽度。否则，这些列将处于自动大小 –

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

来源

2017-01-06 12:36:53

你可以做的是将表格布局改为固定的，这样你的布局变得更加可预测。然后添加一个colspan到你最后的td元素。

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>

在百分之

来源

2017-01-06 12:15:11

可以使用1个标签与它的几个TBODY标签。这是一个很好的解决方案。您可以通过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>

来源

2017-01-06 12:59:18

对齐两个垂直HTML表格

回答

相关问题