Pourquoi l'en-tête est-il situé au-dessus du corps, je ne sais pas pourquoi.

Question

Dans le fichier ejs, l'en-tête du tableau traverse le corps du tableau, comme ceci Le code est :

<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>

J'ai essayé de faire le formulaire en situation normale, tête au-dessus du corps J'ai essayé de résoudre ce problème en divisant le tableau en deux parties, mais sans succès.

Answer 1

tbody 行不包含必要的 <td>Éléments.

Sans td :

    

        
                  
            
Title
            
Img
            
Size