2つの垂直HTMLテーブルを整列する

Question

2つのテーブルを上下に積み重ねています。その2つを区切る場所には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>