为什么表头位于表体之上，我不知道原因

Question

在 ejs 文件中，表头越过表体，就像这样 代码是：

<div class="container">
            <% for(var i = 0; i < user_show_cart.products.length; i++) { %>
            <td><%= i + 1 %></td>
            <form class="form" method="" action=""  id="">
                <table class="table">
                    <thead class="thead-dark">
                        <tr>                  
                            <th>Title</th>
                            <th>Img</th>
                            <th>Size</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <input type="hidden" name="productId" value="<%= user_show_cart.products[i].productId %>"><!--do not put td not to make displacement-->
                            <input type="text" name="productTitle" value="<%= user_show_cart.products[i].title %>">
                            <input type="text" name="productImg" value="<%= user_show_cart.products[i].img %>">
                            <input type="text" name="productSize" value="<%= user_show_cart.products[i].size %>">
                        </tr>       
                    </tbody>
                </table>       
                <table class="table">
                    <thead class="thead-dark">
                        <tr>                  
                            <th>Color</th>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>SubTotalPric</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>    
                            <input type="text" name="productColor" value="<%= user_show_cart.products[i].color %>">
                            <input type="number" name="productPrice" value="<%= user_show_cart.products[i].price %>">
                            <input type="number" name="productQuantity" value="<%= user_show_cart.products[i].quantity %>" min="1" max="1000" step="1"></td>
                            <input type="text" name="productSubTotalPrice" value="<%= user_show_cart.products[i].subTotalPrice %>">
                            <button type="submit" class="btn text-dark update" >Change Quantity</button>
                        </tr>
                    </tbody>
                </table>
            </form>
            <% } %> 
        </div>

我尝试用正常情况制作表格，头在身体上方 我试图将表格分成两部分来解决这个问题，但没有成功。

Answer 1

tbody 行不包含必要的 <td> 元素。

没有 td 的：

Title	Img	Size