如何在 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>
元素),这不是正确的做法。
网上查了没找到答案,所以才来问这个问题
新数据会一直按照下面的格式,填充在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>
元素),这不是正确的做法。