為什麼表頭位於表體之上，我不知道原因

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