html - 可折叠的 div 作为行元素

Question

我正在尝试准备一个简单的评分表 [作为证明我的要求的示例]。我计划有一个可折叠的 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>

fiddle

但在这种方法中，当一个部分未展开时，包含可折叠 div 的行在表格中看起来像一个空白行 - 这是非常误导的。

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

Answer 1

使用这个 CSS:

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

Fiddle