Html 作为行元素的可折叠div

我正在准备一份简单的评分表[作为一个例子来说明我的要求]。我计划有一个可折叠的div，一旦扩展，它将呈现所有的标记细节

<div class="well">
  <table class="table table-bordered" 
         style="background:#fff; margin-bottom:10px;">
    <tbody>  
      <tr class="inverse">
        <th> ID</th>
        <th colspan="2"> Name</th>
      </tr>
      <tr>
        <td>1</td>
        <td>ABC</td>
        <td>
          <a  class="btn btn-primary" data-toggle="collapse" href="#ID_1" 
              aria-expanded="false"  >
              Hide/Unhide
          </a>
        </td>
      </tr>
      <tr>
        <td colspan="3">    
          <div class="collapse" id="ID_1">
            <div class="well">
              <table  class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
                <thead>                
                   <tr class="inverse">
                      <th>Subject</th>
                      <th>Mark</th>
                   </tr>
                </thead>
                <tbody>                
                  <tr>
                    <td>Physics </td>
                    <td>100</td>
                  </tr>
                </tbody>    
              </table>
            </div>
          </div>
        </td>
      </tr>
      <tr class="inverse">
        <th> ID</th>
        <th colspan="2"> Name</th>
      </tr>
      <tr>
        <td>2</td>
        <td>PQR</td>
        <td>
          <a  class="btn btn-primary" data-toggle="collapse" href="#ID_2" 
              aria-expanded="false"    >
              Hide/Unhide
          </a>
        </td>
      </tr>
      <tr>
        <td colspan="3">    
          <div class="collapse" id="ID_2">
            <div class="well">
              <table  class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
                <thead>                
                   <tr class="inverse">
                      <th>Subject</th>
                      <th>Mark</th>
                   </tr>
                </thead>
                <tbody>                
                  <tr>
                    <td>Chemistry</td>
                    <td>100</td>
                  </tr>
                </tbody>    
              </table>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

身份证件
名称
1.
基础知识
主题
做记号
物理
100
身份证件
名称
2.
PQR
主题
做记号
化学
100

但是在这种方法中，当一个节没有展开时，包含可折叠div的行在表中看起来像一个空行，这是非常容易引起误解的

我确信这不是呈现此类详细信息的最佳方式。想知道呈现这些详细信息的可选UI选项是什么。

使用此CSS：

td[colspan="3"] {
  padding: 0;
}

---

要点。添加了代码。您可以将@DavidThomas单元格的空格设为0，谢谢您指出。添加了详细信息。