Bootstrap中隱藏的行有一個高度

當然這有一個簡單的答案，但不能讓我的頭靠近它。Bootstrap中隱藏的行有一個高度

我有引導表，隱藏的行顯示在它隱藏在後面的行點擊。但是，隱藏的行顯示出來，我不能讓它們在未被選中時消失。

試圖讓行之間擺脫了突出空間的按本圖：

<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>

如果你知道如何獲得。表條紋忽略隱藏的行過，那簡直太好了。

來源

2017-04-04 gnuchu

鏈接的jsfiddle爲SO編輯器不會允許它的主要問題：https://jsfiddle.net/gnuchu/vf2k12kf/ – gnuchu

你看了它之所以止跌」讓你添加鏈接到小提琴。不要忽視規則 – Pete

@gnuchu - 請在問題中加入代碼 – ZimSystem

它的頂部&底部填充。你可以用..

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

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

這樣，這只是調整hidden-row，並且不重寫引導表默認值重置。此外，您可能想要保留左/右填充，以便隱藏行中的列正確對齊。

來源

2017-04-04 09:50:18 ZimSystem

重置的CSS屬性

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

來源

2017-04-04 09:49:59

它給它的填充空間。這應該工作

.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; 
}

來源

2017-04-04 09:51:22

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>

來源

2017-04-04 11:08:44

Bootstrap中隱藏的行有一個高度

回答

相關問題