In the ejs file, the table header crosses the table body, like this The code is:

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

I tried making the form with normal, head above body I tried to solve this problem by splitting the table into two parts, but without success.