EJS文件中表头覆盖表体问题求助

问题根源 #

你的代码存在3处HTML结构错误，直接导致表格布局错乱：

• 序号列<td><%= i + 1 %></td>直接放在<div>下，<td>必须嵌套在<table>的<tr>内部才符合规范
• 表格<tbody>里的所有表单控件都没放在<td>中，浏览器无法正确解析表格结构，自动修正DOM时就会出现表头覆盖表体的情况
• 把一个产品的信息拆成两个独立表格，进一步加剧了布局混乱

修正后的代码（推荐方案） #

将所有产品信息整合到一个表格里，表头只渲染一次，符合购物车的常规布局：

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

关键修改点 #

1. 表头移到循环外，只渲染一次，避免重复显示表头
2. 序号列放到表格的<tr>内部，修正DOM结构错误
3. 所有表单控件都包裹在<td>中，保证表格单元格结构完整
4. 合并拆分的两个表格，让每个产品的信息在一行内展示，布局更规整
5. 修正了拼写错误：SubTotalPric改为SubTotalPrice

保留双表格的备选方案 #

如果一定要保留两个表格的结构，必须确保每个表格的内容都符合HTML规范：

<div class="container">
    <% for(var i = 0; i < user_show_cart.products.length; i++) { %>
    <div class="product-group">
        <table class="table">
            <thead class="thead-dark">
                <tr>                  
                    <th>#</th>
                    <th>Title</th>
                    <th>Img</th>
                    <th>Size</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><%= i + 1 %></td>
                    <td>
                        <input type="hidden" name="productId" value="<%= user_show_cart.products[i].productId %>">
                        <input type="text" name="productTitle" value="<%= user_show_cart.products[i].title %>">
                    </td>
                    <td><input type="text" name="productImg" value="<%= user_show_cart.products[i].img %>"></td>
                    <td><input type="text" name="productSize" value="<%= user_show_cart.products[i].size %>"></td>
                </tr>       
            </tbody>
        </table>       
        <table class="table">
            <thead class="thead-dark">
                <tr>                  
                    <th>Color</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>SubTotalPrice</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>    
                    <td><input type="text" name="productColor" value="<%= user_show_cart.products[i].color %>"></td>
                    <td><input type="number" name="productPrice" value="<%= user_show_cart.products[i].price %>"></td>
                    <td><input type="number" name="productQuantity" value="<%= user_show_cart.products[i].quantity %>" min="1" max="1000" step="1"></td>
                    <td><input type="text" name="productSubTotalPrice" value="<%= user_show_cart.products[i].subTotalPrice %>"></td>
                    <td><button type="submit" class="btn text-dark update">修改数量</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <% } %> 
</div>

内容的提问来源于stack exchange，提问作者محمد كمال