Javascript 我们可以在`<；之后使用嵌套表吗；tr></tr>；`？

我正在表列表中显示数据库中的记录。此外，我在每一行都有一个跟进按钮，如果任何用户单击跟进按钮，那么将为特定用户打开一个带有详细信息的弹出窗口

或者其他处理这个问题的方法

我试着用这样的东西

<table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td></td></tr>

<div style="display:none">
<table>
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td></td></tr>
</tbody>
</table>
</div>

</tbody>
</table>

---

是的，您当然可以在表中添加表，但请记住将它们添加到表单元格中，即

下面是参考链接，不要害怕尝试！
参考：
（另请注意，如果您担心在单元格中创建额外的空格，可以在css中修改单元格或嵌套表格的样式，例如调整边距或填充。
插件：
您可以尝试使用jquery从单击的链接中获取

数据

，并从链接中删除

onclick=followup（this）

将此添加到脚本中并尝试：

$(".archive").on('click',function(){
        var id = $(this).data('id');
        $("#popup-"+id).show();
})

---

你当然可以创建嵌套表。在

td

标记之前，将所有内容都像普通表一样创建。在这里面，创建表标记和所有内容。你首先要做的是糟糕的缩进（我在JSFIDLE中整理过）

这是表格单元格的外观：

<td>
    <table>
      <thead>
        <th>sub</th>
      </thead>
      <tbody>
        <tr>
          <td>maths</td>
        </tr>
      </tbody>
    </table>
</td>

附属的
数学

您还可以使用colspan和rowspan（其结果类似），以防止被复杂的设计冲昏头脑

<tr>
 <td rowspan = 2>10</td>
 <td> 10 </td>
</tr>
<tr>
 <th>sub</th>
</tr>
<tr>
 <td>math>
</tr>

10
10
附属的
数学>

是的，您可以嵌套一个表，但它必须位于一个表单元格内，在

和

之间，或者在

和

之间。这就是表的工作方式：所有内容都必须位于标题或数据单元格中。@Locker，我试图使用弹出代码，但它在表中创建了额外的空间。您能告诉我们什么吗输出为（带屏幕帽）你希望它看起来像什么？你没有包括细节。@FunkFortyNiner，好的，我会在细节中解释。只要给我更新我的问题的那一刻。好的。事实上，请通读一下-这里有嵌套表的示例。我自己实际上也在那个区域。哈哈！我只是在做一个复习课程，就像这样。Y是啊，甚至我有时也得自己再读一遍：——）是的，我在上传问题之前阅读了这篇文章。我尝试了在表格单元格中你想要实现什么？弹出模式还是嵌套表格？我添加了样式显示：无空格，但这不是一个单元格，这是我必须在全屏上覆盖的弹出窗口。我在问题中添加了我需要弹出窗口的内容。或者有其他方法来处理这个问题吗问题？那你为什么要把它们放在表中呢？只要把它们放在HTML的末尾。@Mike，如果我在HTML的末尾添加，那么当我单击followup按钮时，它只会说最后一个id值。我很确定他们希望这里有动态的东西。这只是一个“HTML 101”真的是一个例子。没有什么没有说的（在评论中）.我不会否决这个，但我当然也不会反对；只是说实话。@FunkFortyNiner我在写这个答案的时候，另一个已经发布了。另外，他问我如何制作嵌套表，我回答了这个问题。哦，我对马文没有争论。我只是感觉他们在寻找一个动态的解决方案，而不是一个静态的。@FunkFortyNiner我还想补充一点，他们可以使用col和row span，而不是嵌套表作为建议，但我必须先发布我答案的第一部分。如果你是指用户交互、数据、客户端和php，那么你是对的。我没有php方面的经验，所以我只想给他一个大概的答案我们应该一起去。

        .view_popup_profile {
    position: fixed; /* Stay in place */
    z-index: 9; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s;
}
/* Modal Content */
.profile_content {
    position: fixed;
    top: 25%;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.5s;
    animation-name: slideIn;
    animation-duration: 0.5s;
    max-width: 922px;
    margin: auto;
    left: 0;
    right: 0;
    box-shadow: 0 0 15px rgba(0,0,0,.3);
}
/* The Close Button */

.profile_header {
    padding: 1px 20px;
    background-color: #fafafc;
    color: white;
    /* min-height: 58px; */
    border-bottom: 1px solid #f7f7f7;
    display: block;
    width: 100%;
}
.profile_header:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 16px solid #f7f7f7;
    position: absolute;
}
.profile_body {
    padding: 35px 50px;
}
.profile_footer {
    padding: 0;
    background-color: #fdfdfe;
    color: #858585;
}
p{color: #000;}
    /* Add Animation */
    @-webkit-keyframes slideIn {
 from {
 top: -500px;
 opacity: 0
}
 to {
 top:25%;
 opacity: 1
}
}
 @keyframes slideIn {
 from {
 top: -500px;
 opacity: 0
}
 to {
 top:25%;
 opacity: 1
}
}
 @-webkit-keyframes fadeIn {
 from {
 opacity: 0
}
 to {
 opacity: 1
}
}
 @keyframes fadeIn {
 from {
 opacity: 0
}
 to {
 opacity: 1
}
}

$(".archive").on('click',function(){
        var id = $(this).data('id');
        $("#popup-"+id).show();
})

<td>
    <table>
      <thead>
        <th>sub</th>
      </thead>
      <tbody>
        <tr>
          <td>maths</td>
        </tr>
      </tbody>
    </table>
</td>

<tr>
 <td rowspan = 2>10</td>
 <td> 10 </td>
</tr>
<tr>
 <th>sub</th>
</tr>
<tr>
 <td>math>
</tr>