删除空白倒塌行

Question

Bootply：http://www.bootply.com/N8lH48VBN7

我有，我想每一行展开以显示更多行的行，但我有摆脱即使隐藏的行不扩大空白的麻烦。我认为可能有一种在JS中编写函数的方法，但有没有更快更简单的方法来实现这一点？

另外，当展开折叠的行时，会有一些空格，并且我试图更改div的某些属性而无济于事。

Answer 1

...或者你可以添加这个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

Answer 2

删除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; 
} 

Answer 3

使用该CSS样式

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

Answer 4

看到这个bootply

只需添加这个CSS和远离!important远离其他答案建议。

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

切勿使用！重要

这里几乎所有的答案建议使用!important。我认为他们都需要阅读CSS Specificity，并且今天停止使用!important。

Answer 5

使用下面的代码在CSS

tr td{padding: 0!important;} 

感谢与问候

Answer 6

引导有一个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; 
}