ブートストラップの非表示行の高さは

Question

です。これは簡単な答えですが、私の周りに頭を浮かべることはできません。

隠されている行のクリックで表示される非表示の行を持つブートストラップテーブルがあります。しかし、非表示の行が表示され、選択されていないときに非表示にすることはできません。

この写真ごとに行の間の強調表示スペースを取り除くしようとすると：

<table class='table table-hover table-bordered table-striped'> 
    <thead> 
     <tr> 
     <th>Status</th> 
     <th>Name</th> 
     <th>GuideWire</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr data-toggle='collapse' data-target='#info_1'> 
     <td>Good</td> 
     <td>FooBar</td> 
     <td>Something else</td> 
     </tr> 
     <tr> 
     <td colspan='8' class='hidden-row'> 
      <div class='collapse' id='info_1'> 
      <table class="table table-condensed table-sm small"> 
       <thead> 
       <th>ABC</th> 
       <th>DEF</th> 
       </thead> 
       <tbody> 
       <tr> 
        <td>S1</td> 
        <td>Blah</td> 
       </tr> 
       <tr> 
        <td>S1</td> 
        <td>Blah</td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
     </td> 
     </tr> 
     <tr data-toggle='collapse' data-target='#info_2'> 
     <td>Good 2</td> 
     <td>FooBar 2</td> 
     <td>Something else 2</td> 
     </tr> 
     <tr> 
     <td colspan='8' class='hidden-row'> 
      <div class='collapse' id='info_2'> 
      <table class="table table-condensed table-sm small"> 
       <thead> 
       <th>ABC</th> 
       <th>DEF</th> 
       </thead> 
       <tbody> 
       <tr> 
        <td>S1</td> 
        <td>Blah</td> 
       </tr> 
       <tr> 
        <td>S1</td> 
        <td>Blah</td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 

あなたはあまりにも非表示の行を無視する.tableストライプ取得する方法を知っていれば、それは素晴らしいことです。

Answer 1

をリセットします。あなたは...

.table>tbody .hidden-row { 
    padding: 0 8px; 
} 

http://www.codeply.com/go/Ev7XStMM0f

この方法でそれが唯一のhidden-rowを調整し、ブートストラップのテーブルのデフォルトをオーバーライドしていないと、それをリセットすることができます。また、非表示行の列が適切に整列するように、左/右パディングを保持することもできます。

Answer 2

それはトップ&下のパディングのCSSプロパティ

.table.table-hover { 
    line-height: 0; 
    height: 0px; 
    padding: 0; 
} 

Answer 3

それにスペースを与えているパディングです。 これは、SOエディタがメインの質問にそれを許可しないだろうとjsfiddleする

.table>tbody>tr>td.hidden-row, .table>tbody>tr>th.hidden-row, 
.table>tfoot>tr>td.hidden-row, 
.table>tfoot>tr>th.hidden-row, .table>thead>tr>td.hidden-row, 
.table>thead>tr>th.hidden-row { 
    padding: 0; 
} 

Answer 4

Try the below code and let me know if it works for you 

**CSS** 

.inner-table-data 
{ 
    margin-bottom: 0; 
} 

**HTML** 



<table class='table table-hover table-bordered table-striped'> 
     <thead> 
      <tr> 
       <th>Status</th> 
       <th>Name</th> 
       <th>GuideWire</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr data-toggle='collapse' data-target='#info_1'> 
       <td class="col-sm-4">Good</td> 
       <td class="col-sm-4">FooBar</td> 
       <td class="col-sm-4">Something else</td> 
      </tr> 
      <tr> 
       <td colspan='1' class='collapse' id='info_1'> 
        <div> 
         <table class="table table-striped inner-table-data"> 
          <thead> 
          <th>ABC</th> 
          <th>DEF</th> 
          </thead> 
          <tbody> 
           <tr> 
            <td>S1</td> 
            <td>Blah</td> 
           </tr> 
           <tr> 
            <td>S1</td> 
            <td>Blah</td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 
       </td> 
      </tr> 
      <tr data-toggle='collapse' data-target='#info_2'> 
       <td class="col-sm-4">Good 2</td> 
       <td class="col-sm-4">FooBar 2</td> 
       <td class="col-sm-4">Something else 2</td> 
      </tr> 
      <tr> 
       <td colspan='1' class='collapse' id='info_2'> 
        <div> 
         <table class="table table-striped inner-table-data"> 
          <thead> 
          <th>ABC</th> 
          <th>DEF</th> 
          </thead> 
          <tbody> 
           <tr> 
            <td>S1</td> 
            <td>Blah</td> 
           </tr> 
           <tr> 
            <td>S1</td> 
            <td>Blah</td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 
       </td> 
      </tr> 
     </tbody> 
    </table>