Warum befindet sich die Kopfzeile über dem Text? Ich weiß nicht warum.

Question

In der EJS-Datei kreuzt der Tabellenkopf den Tabellenkörper, so wie hier Der Code lautet:

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

Ich habe versucht, die Form in einer normalen Situation zu erstellen, Kopf über dem Körper Ich habe versucht, dieses Problem zu lösen, indem ich die Tabelle in zwei Teile geteilt habe, aber ohne Erfolg.

Answer 1

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

没有 td 的：

    

        
                  
            
Title
            
Img
            
Size