英文:
i do not know why table head is located the table body
问题
在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>标题</th>
<th>图片</th>
<th>尺寸</th>
</tr>
</thead>
<tbody>
<tr>
<input type="hidden" name="productId" value="<%= user_show_cart.products[i].productId %>"><!--不要放在td中以避免位移-->
<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>颜色</th>
<th>价格</th>
<th>数量</th>
<th>小计价格</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">
<input type="text" name="productSubTotalPrice" value="<%= user_show_cart.products[i].subTotalPrice %>">
<button type="submit" class="btn text-dark update">更改数量</button>
</tr>
</tbody>
</table>
</form>
<% } %>
</div>
您尝试将表格分成两部分来解决此问题，但未成功。
英文:
table head coming over table body in ejs file like that
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 try to make the table with the normal case , where head over body
i tried to divide the table into 2 parts to overcome this problem, but not succeed.
答案1
得分: 1
以下是您要翻译的内容：
不包括必要的<td>元素的tbody行。
没有td的情况：
<table class="table">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Img</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<input type="text" name="productTitle" value="Title">
<input type="text" name="productImg" value="Image">
<input type="text" name="productSize" value="Size">
</tr>
</tbody>
</table>
带有td的情况：
<table class="table">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Img</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="productTitle" value="Title"></td>
<td><input type="text" name="productImg" value="Image"></td>
<td><input type="text" name="productSize" value="Size"></td>
</tr>
</tbody>
</table>
英文:
The tbody rows do not include the necessary <td> elements.
Without the td's:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<table class="table">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Img</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<input type="text" name="productTitle" value="Title">
<input type="text" name="productImg" value="Image">
<input type="text" name="productSize" value="Size">
</tr>
</tbody>
</table>
<!-- end snippet -->
With td's:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<table class="table">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Img</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="productTitle" value="Title"></td>
<td><input type="text" name="productImg" value="Image"></td>
<td><input type="text" name="productSize" value="Size"></td>
</tr>
</tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论