Как вы видите вложенные таблицы?

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 имеет несколько ошибок, начиная с этого:

{#orders} 

Как уже упоминалось, это тоже плохо:

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

Сделайте себе одолжение и начать использовать HTML валидатор, как W3C's. Он быстро найдет такие проблемы. (Он также найдет другие вещи, чтобы жаловаться на то, что вам может не понадобиться исправить, но когда это поможет, это сэкономит много времени.)

Также приступите к использованию инспектора Chrome, чтобы узнать, что это делается, когда ваш разметка идет haywire. В этом случае вы можете видеть, что 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> тег внутри тега <td>, а не внутри метки <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> в качестве дочернего элемента <tr>, который является неправильным. Он должен быть ребенком <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>