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

可折叠div作为行元素

1 个答案: