刪除空白倒塌行

Bootply：http://www.bootply.com/N8lH48VBN7 刪除空白倒塌行

我有，我想每一行展開以顯示更多行的行，但我有擺脫即使隱藏的行不擴大空白的麻煩。我認爲可能有一種在JS中編寫函數的方法，但有沒有更快更簡單的方法來實現這一點？

另外，當展開摺疊的行時，會有一些空格，並且我試圖更改div的某些屬性而無濟於事。

2015-08-27 maregor

是[**這**]（ http://www.bootply.com/2innrDXy7u）你在找什麼？ – DavidDomain

...或者你可以添加這個JS代碼：

$("td[colspan]").css("padding", "0"); 
$(".table").css("margin-bottom", "0");

Here is the Bootyply

或者可以使用純CSS這樣的：

td[colspan]{ 
    padding:0 !important; 
} 

.table{ 
    margin-bottom:0 !important; 
}

CSS Only Bootply

來源

2015-08-27 08:14:33

這工作:)但摺疊行怎麼樣？空白從哪裏來？ – maregor

@maregor我更新了代碼。白色間距是由bootstrap應用到類「.table」類的元素引起的默認css造成的。 20px的「margin-bottom」是。所以我再次使用JS代碼刪除它:) –

@WouterHuysentruit用CSS-only bootply更新，玩得開心：P –

刪除padding-top和padding-bottom只從您的collaps ed行。此填充來自引導表樣式。

tr:not([data-toggle]) > td { padding-top: 0px; padding-bottom: 0px; }

選擇不帶有稱爲data-toggle的屬性的行的子項的單元格。

嵌套表中還有餘量。您可以刪除：

.table tr:not([data-toggle]) table, 
.table tr:not([data-toggle]) td { 
    padding: 0; margin: 0px; 
}

來源

2015-08-27 08:16:20 Abhitalks

我不認爲它會改變任何東西... – maregor

@maregor：增加了。 – Abhitalks

@downvoter：謹慎解釋發生了什麼問題？ – Abhitalks

使用該CSS樣式

tr[data-toggle="collapse"] + tr td { 
    padding: 0 !important; 
}

來源

2015-08-27 08:17:33

看到這個bootply

只需添加這個CSS和遠離!important遠離其他答案建議。

.table>tbody>tr>td[colspan] { 
    padding: 0; 
} 
.table>tbody>tr>td[colspan] .table { 
    margin-bottom: 0; 
}

切勿使用！重要

這裏幾乎所有的答案建議使用!important。我認爲他們都需要閱讀CSS Specificity，並且今天停止使用!important。

來源

2015-08-27 08:25:36

使用下面的代碼在CSS

tr td{padding: 0!important;}

感謝與問候

來源

2015-08-27 08:29:59

引導有一個css樣式本身。（所以，如果你想申請你的CSS樣式，你必須使用「！重要」關鍵字在你的CSS）。

，並你的代碼結構不好爲好。因此，它在每個表格行內部留出了一點空間。

我想你想這樣做。:)

[結果]http://www.bootply.com/0QqWzFcwWo#

1. HTML源

<div class="col-lg"> 
     <div class="project" id="prodemo"></div> 

     <table class="table table-striped table-hover"> 
      <thead align="center"> 
       <tr> 
        <th width="1%">&nbsp;</th> 
        <th width="24%">ID</th> 
        <th width="25%">Name</th> 
        <th width="25%">Phone</th> 
        <th width="25%">DOB</th> 
       </tr> 
      </thead> 

      <tbody> 
       <!-- [demo] --> 
       <tr class="prevent_drag" data-target="#demo" data-toggle="collapse"> 
        <td>&nbsp;</td> 
        <td>MyID</td> 
        <td>MyName</td> 
        <td>MyPhone</td> 
        <td>MyDOB</td> 
       </tr> 

       <tr id="demo" class="collapse myOptions"> 
        <td>&nbsp;</td> 
        <td>Details</td> 
        <td>Details2</td> 
        <td>Details3</td> 
        <td>Details4</td> 
       </tr> 

       <!-- [demo2] --> 
       <tr class="prevent_drag" data-target="#demo2" data-toggle="collapse"> 
        <td>&nbsp;</td> 
        <td>MyID</td> 
        <td>MyName</td> 
        <td>MyPhone</td> 
        <td>MyDOB</td> 
       </tr> 

       <tr id="demo2" class="collapse myOptions"> 
        <td>&nbsp;</td> 
        <td>Details</td> 
        <td>Details2</td> 
        <td>Details3</td> 
        <td>Details4</td> 
       </tr> 

       <!-- [demo3] --> 
       <tr class="prevent_drag" data-target="#demo3" data-toggle="collapse"> 
        <td>&nbsp;</td> 
        <td>MyID</td> 
        <td>MyName</td> 
        <td>MyPhone</td> 
        <td>MyDOB</td> 
       </tr> 

       <tr id="demo3" class="collapse myOptions"> 
        <td>&nbsp;</td> 
        <td>Details</td> 
        <td>Details2</td> 
        <td>Details3</td> 
        <td>Details4</td> 
       </tr> 

      </tbody> 
     </table> 
    </div>

2. CSS源

.myOptions { 
    padding: 0 !important; 
    margin: 0 !important; 
    color: red; 
} 

.table th { 
    cursor:default; 
} 

.prevent_drag { 
    cursor:pointer; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

來源

2015-08-27 09:54:54

刪除空白倒塌行

回答

相關問題