您如何顯示嵌套表？

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

您需要將子<table>標記嵌套在<td>標記內，而不是<tr>標記內。 這樣做應該可以使其正確顯示，因為只有<td>或<th>標記可以直接放在<tr>標記內。

Answer 2

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

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

您的嵌套表必須位於td或th之內。

Answer 3

您的HTML包含以下幾個錯誤：

{#orders}

正如其他人所提到的，這也是不好的：

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

幫自己一個忙，開始使用像W3C的 HTML驗證器。 它將很快發現類似的問題。 （它還會發現其他一些問題，使您抱怨您可能不需要修復，但是如果有幫助，它將節省大量時間。）

另外，開始使用Chrome檢查器查看在標記變亂時所做的事情。 在這種情況下，您會看到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 4

<table>標記必須位於<td>或<th>標記內才能嵌套。 在您的代碼中，您將<table>標記作為<tr>標記的子代放置了，這是錯誤的。 它應該是<td>或<th>子代。

在<tr>和<table>之間插入<td>或<th> <table>將正確輸出。

這是可供參考的工作鏈接： 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>