如何在 table 中正确插入 <div> 和 <tr>?

how to properly insert <div> with <tr> inside a table?

网上查了没找到答案,所以才来问这个问题

新数据会一直按照下面的格式,填充在id="content"

<tr>
   <td>name</td>
   <td>age</td>
   <td>gender</td>
</tr>

我读到如果要将 <div> 放入 <table> 中,则需要将 <div> 放入 <td> 中。现在,格式不正确。所有新数据都在第一列,而不是每一行。

<table>
   <tr>
      <th>name</th>
      <th>age</th>
      <th>gender</th>
   </tr>
   <td>
      <div id="contents">
         <tr>
            <td>John</td>
            <td>12</td>
            <td>male</td>
         </tr>
         <tr>
            <td>Jess</td>
            <td>13</td>
            <td>female</td>
         </tr>
      </div>
   <td>
</table>

更新

重新阅读您最有可能需要的结构

<table>
  <thead>
   <tr>
      <th>name</th>
      <th>age</th>
      <th>gender</th>
   </tr>
  </thead>
  <tbody id="contents">
     <tr>
        <td>John</td>
        <td>12</td>
        <td>male</td>
     </tr>
     <tr>
        <td>Jess</td>
        <td>13</td>
        <td>female</td>
     </tr>
  </tbody>
</table>

原回答

您不能将 tr 作为 div 的直系子代。

您需要使用 table

两者都

<table>
   <tr>
      <th>name</th>
      <th>age</th>
      <th>gender</th>
   </tr>
   <td>
      <table id="contents">
       <tr>
          <td>John</td>
          <td>12</td>
          <td>male</td>
       </tr>
       <tr>
          <td>Jess</td>
          <td>13</td>
          <td>female</td>
       </tr>
      </table>
   <td>
</table>

<table>
   <tr>
      <th>name</th>
      <th>age</th>
      <th>gender</th>
   </tr>
   <td>
      <div id="contents">
       <table>
        <tr>
          <td>John</td>
          <td>12</td>
          <td>male</td>
        </tr>
        <tr>
          <td>Jess</td>
          <td>13</td>
          <td>female</td>
        </tr>
       </table>
      </div>
   <td>
</table>

我认为您希望 table 完全位于 div 内部,并且所有新数据都在相应的行中,如下所示:

<div id="contents">
  <table>
     <tr>
        <th>name</th>
        <th>age</th>
        <th>gender</th>
     </tr>
     <tr>
        <td>John</td>
        <td>12</td>
        <td>male</td>
     </tr>
     <tr>
        <td>Jess</td>
        <td>13</td>
        <td>female</td>
     </tr>

    </table>
</div>

目前格式错误,因为您正试图将整个数据添加到单个单元格(<td> 元素),这不是正确的做法。