どのようにしてネストした表を表示しますか？

Question

次のように私は、HTMLのテーブル内のテーブルを持っている：

<table class="sortable draggable"> 
    <thead> 
     <tr> 
      <th class="col-salesOrderId">Order Number</th> 
      <th class="col-orderDate">Date of Order</th> 
      <th class="col-party">Party</th> 
      <th class="col-edit">Edit</th> 
      <th class="col-delete">Delete</th> 
     </tr> 
    </thead> 
    <tbody> 
     {#orders} 
     <tr> 
      <td class="col-salesOrderId">{.salesOrderId}</td> 
      <td class="col-orderDate">{@formatDate date=orderDate format="DD-MM-YYYY" /}</td> 
      <td class="col-party">{.party.partyName}</td> 
      <td class="col-edit"> 
       <button class="btn btn-info btn-edit"> 
        &nbsp; 
       </button> 
      </td> 
      <td class="col-delete"> 
       <button class="btn btn-danger btn-delete"> 
        &nbsp; 
       </button> 
      </td> 
     </tr> 
     <tr> 
      <table class="sortable draggable row-details"> 
      <thead> 
       <tr> 
        <th class="col-itemName">Item Name</th> 
        <th class="col-quantity">Quantity</th> 
        <th class="col-rate">Rate</th> 
        <th class="col-amount">Amount</th> 
       </tr> 
      </thead> 
      <tbody> 
       {#items} 
        <tr> 
        <td>{.item.itemName}</td> 
        <td>{.quantity}</td> 
        <td>{.rate}</td> 
         <td>{.quantity * .rate}</td> 
        </tr> 
       {/items} 
      </tbody> 
      </table> 
     </tr> 
     {/orders} 
    </tbody> 
</table> 

以下に示すように、私は出力を得る：

私は、このような出力を得るのはなぜ？私はネストされたテーブルを見ることを期待していた。

Answer 1

あなたのHTMLは、この始まる、いくつかの誤りがあります。

<tr>↩   <table class="sortable draggable row-details" 

は自分自身に大きな恩恵を行うと、HTMLバリデータなどを使用して起動します。

他の人が述べたように

{#orders} 

、これも悪いですW3C's。このような問題はすぐに見つかるでしょう。また、修正する必要がないかもしれないと不平を言うこともありますが、助けがあれば時間が大幅に節約できます。

また、Chromeのインスペクタを使用して、マークアップは大雑把になります。この場合、クロスタブが最初のテーブルをネストするのではなく閉じたことがわかります。 ChromeがこのようにHTMLを混乱させると、その場所でエラーが発生する可能性があります。

</tr></tbody></table> 
       {#items} 

       {/items} 
      <table class="sortable draggable row-details"> 
      <thead> 
       <tr> 
        <th class="col-itemName">Item Name</th> 
        <th class="col-quantity">Quantity</th> 

Answer 2

子供の<table>タグは、タグ内に入れ子にする必要があります。<tr>タグには含まれません。これを行うと、<td>または<th>タグだけが<tr>タグの中に直接入ることができるため、正しく表示されるはずです。

Answer 3

<table> 
    <tr> 
     <td> <!-- must be in td --> 
      <table> <!-- nested table --> 
        <tr> 
         <td> 

         </td> 
        </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

ネストした表は、tdまたはthの内側にある必要があります。

Answer 4

<table>タグは、それがネストするため<td>又は<th>タグ内にする必要があります。あなたのコードでは、タグの子として<table>タグが間違っています。子は<td>または<th>にする必要があります。

<td>または<th>を<tr>と<table>の間に挿入すると、正しく出力されます。ここで

は、参考のためにリンクを働いている： Nested Tables in HTML

例：

<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>Item 1 
 
     <th>Item 2 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <table border="1"> 
 
      <tr> 
 
      <td>1 
 
      <td>2 
 
      </tr> 
 
      <tr> 
 
      <td>1 
 
      <td>2 
 
      </tr> 
 
     </table> 
 
     <td>A 
 
    </tr> 
 
    </tbody> 
 
</table>