我不知道为什么表头位于表体。

huangapple
go评论97阅读模式
英文:

i do not know why table head is located the table body

问题

在ejs文件中，表头覆盖了表体的问题如下所示：
我不知道为什么表头位于表体。

以下是相关代码：

  1. <div class="container">
  2.     <% for(var i = 0; i < user_show_cart.products.length; i++) { %>
  3.     <td><%= i + 1 %></td>
  4.     <form class="form" method="" action="" id="">
  5.         <table class="table">
  6.             <thead class="thead-dark">
  7.                 <tr>
  8.                     <th>标题</th>
  9.                     <th>图片</th>
  10.                     <th>尺寸</th>
  11.                 </tr>
  12.             </thead>
  13.             <tbody>
  14.                 <tr>
  15.                     <input type="hidden" name="productId" value="<%= user_show_cart.products[i].productId %>"><!--不要放在td中以避免位移-->
  16.                     <input type="text" name="productTitle" value="<%= user_show_cart.products[i].title %>">
  17.                     <input type="text" name="productImg" value="<%= user_show_cart.products[i].img %>">
  18.                     <input type="text" name="productSize" value="<%= user_show_cart.products[i].size %>">
  19.                 </tr>
  20.             </tbody>
  21.         </table>
  22.         <table class="table">
  23.             <thead class="thead-dark">
  24.                 <tr>
  25.                     <th>颜色</th>
  26.                     <th>价格</th>
  27.                     <th>数量</th>
  28.                     <th>小计价格</th>
  29.                 </tr>
  30.             </thead>
  31.             <tbody>
  32.                 <tr>
  33.                     <input type="text" name="productColor" value="<%= user_show_cart.products[i].color %>">
  34.                     <input type="number" name="productPrice" value="<%= user_show_cart.products[i].price %>">
  35.                     <input type="number" name="productQuantity" value="<%= user_show_cart.products[i].quantity %>" min="1" max="1000" step="1">
  36.                     <input type="text" name="productSubTotalPrice" value="<%= user_show_cart.products[i].subTotalPrice %>">
  37.                     <button type="submit" class="btn text-dark update">更改数量</button>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </form>
  42.     <% } %>
  43. </div>

您尝试将表格分成两部分来解决此问题，但未成功。

英文:

table head coming over table body in ejs file like that
我不知道为什么表头位于表体。
the code is:

  1. &lt;div class=&quot;container&quot;&gt;
  2.             &lt;% for(var i = 0; i &lt; user_show_cart.products.length; i++) { %&gt;
  3.             &lt;td&gt;&lt;%= i + 1 %&gt;&lt;/td&gt;
  4.             &lt;form class=&quot;form&quot; method=&quot;&quot; action=&quot;&quot;  id=&quot;&quot;&gt;
  5.                 &lt;table class=&quot;table&quot;&gt;
  6.                     &lt;thead class=&quot;thead-dark&quot;&gt;
  7.                         &lt;tr&gt;                  
  8.                             &lt;th&gt;Title&lt;/th&gt;
  9.                             &lt;th&gt;Img&lt;/th&gt;
  10.                             &lt;th&gt;Size&lt;/th&gt;
  11.                         &lt;/tr&gt;
  12.                     &lt;/thead&gt;
  13.                     &lt;tbody&gt;
  14.                         &lt;tr&gt;
  15.                             &lt;input type=&quot;hidden&quot; name=&quot;productId&quot; value=&quot;&lt;%= user_show_cart.products[i].productId %&gt;&quot;&gt;&lt;!--do not put td not to make displacement--&gt;
  16.                             &lt;input type=&quot;text&quot; name=&quot;productTitle&quot; value=&quot;&lt;%= user_show_cart.products[i].title %&gt;&quot;&gt;
  17.                             &lt;input type=&quot;text&quot; name=&quot;productImg&quot; value=&quot;&lt;%= user_show_cart.products[i].img %&gt;&quot;&gt;
  18.                             &lt;input type=&quot;text&quot; name=&quot;productSize&quot; value=&quot;&lt;%= user_show_cart.products[i].size %&gt;&quot;&gt;
  19.                         &lt;/tr&gt;       
  20.                     &lt;/tbody&gt;
  21.                 &lt;/table&gt;       
  22.                 &lt;table class=&quot;table&quot;&gt;
  23.                     &lt;thead class=&quot;thead-dark&quot;&gt;
  24.                         &lt;tr&gt;                  
  25.                             &lt;th&gt;Color&lt;/th&gt;
  26.                             &lt;th&gt;Price&lt;/th&gt;
  27.                             &lt;th&gt;Quantity&lt;/th&gt;
  28.                             &lt;th&gt;SubTotalPric&lt;/th&gt;
  29.                         &lt;/tr&gt;
  30.                     &lt;/thead&gt;
  31.                     &lt;tbody&gt;
  32.                         &lt;tr&gt;    
  33.                             &lt;input type=&quot;text&quot; name=&quot;productColor&quot; value=&quot;&lt;%= user_show_cart.products[i].color %&gt;&quot;&gt;
  34.                             &lt;input type=&quot;number&quot; name=&quot;productPrice&quot; value=&quot;&lt;%= user_show_cart.products[i].price %&gt;&quot;&gt;
  35.                             &lt;input type=&quot;number&quot; name=&quot;productQuantity&quot; value=&quot;&lt;%= user_show_cart.products[i].quantity %&gt;&quot; min=&quot;1&quot; max=&quot;1000&quot; step=&quot;1&quot;&gt;&lt;/td&gt;
  36.                             &lt;input type=&quot;text&quot; name=&quot;productSubTotalPrice&quot; value=&quot;&lt;%= user_show_cart.products[i].subTotalPrice %&gt;&quot;&gt;
  37.                             &lt;button type=&quot;submit&quot; class=&quot;btn text-dark update&quot; &gt;Change Quantity&lt;/button&gt;
  38.                         &lt;/tr&gt;
  39.                     &lt;/tbody&gt;
  40.                 &lt;/table&gt;
  41.             &lt;/form&gt;
  42.             &lt;% } %&gt; 
  43.         &lt;/div&gt;

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

以下是您要翻译的内容：

不包括必要的&lt;td&gt;元素的tbody行。

没有td的情况：

  1. <table class="table">
  2. <thead class="thead-dark">
  3. <tr>
  4. <th>Title</th>
  5. <th>Img</th>
  6. <th>Size</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <input type="text" name="productTitle" value="Title">
  12. <input type="text" name="productImg" value="Image">
  13. <input type="text" name="productSize" value="Size">
  14. </tr>
  15. </tbody>
  16. </table>

带有td的情况：

  1. <table class="table">
  2. <thead class="thead-dark">
  3. <tr>
  4. <th>Title</th>
  5. <th>Img</th>
  6. <th>Size</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td><input type="text" name="productTitle" value="Title"></td>
  12. <td><input type="text" name="productImg" value="Image"></td>
  13. <td><input type="text" name="productSize" value="Size"></td>
  14. </tr>
  15. </tbody>
  16. </table>
英文:

The tbody rows do not include the necessary &lt;td&gt; elements.

Without the td's:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

  1. &lt;table class=&quot;table&quot;&gt;
  2. &lt;thead class=&quot;thead-dark&quot;&gt;
  3. &lt;tr&gt;                  
  4. &lt;th&gt;Title&lt;/th&gt;
  5. &lt;th&gt;Img&lt;/th&gt;
  6. &lt;th&gt;Size&lt;/th&gt;
  7. &lt;/tr&gt;
  8. &lt;/thead&gt;
  9. &lt;tbody&gt;
  10. &lt;tr&gt;
  11. &lt;input type=&quot;text&quot; name=&quot;productTitle&quot; value=&quot;Title&quot;&gt;
  12. &lt;input type=&quot;text&quot; name=&quot;productImg&quot; value=&quot;Image&quot;&gt;
  13. &lt;input type=&quot;text&quot; name=&quot;productSize&quot; value=&quot;Size&quot;&gt;
  14. &lt;/tr&gt;       
  15. &lt;/tbody&gt;
  16. &lt;/table&gt;

<!-- end snippet -->

With td's:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

  1. &lt;table class=&quot;table&quot;&gt;
  2. &lt;thead class=&quot;thead-dark&quot;&gt;
  3. &lt;tr&gt;                  
  4. &lt;th&gt;Title&lt;/th&gt;
  5. &lt;th&gt;Img&lt;/th&gt;
  6. &lt;th&gt;Size&lt;/th&gt;
  7. &lt;/tr&gt;
  8. &lt;/thead&gt;
  9. &lt;tbody&gt;
  10. &lt;tr&gt;
  11. &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;productTitle&quot; value=&quot;Title&quot;&gt;&lt;/td&gt;
  12. &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;productImg&quot; value=&quot;Image&quot;&gt;&lt;/td&gt;
  13. &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;productSize&quot; value=&quot;Size&quot;&gt;&lt;/td&gt;
  14. &lt;/tr&gt;       
  15. &lt;/tbody&gt;
  16. &lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年1月4日 06:06:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/74999121.html
  • ejs
  • express
  • html
  • node.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定