Javascript 删除折叠行中的空白

引导层：

我有一些行，希望每一行都展开以显示其他行，但即使隐藏行未展开，也很难去除空白。我认为可能有一种方法可以用JS编写函数，但是有没有一种更快更简单的方法呢

---

此外，展开折叠的行时，会出现一些空白，我试图更改div的某些属性，但没有效果。

…或者您可以添加以下JS代码：

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

或者可以像这样使用纯CSS：

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

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

---

仅从折叠的行中删除顶部填充的

和底部填充的
内容。此填充来自引导表样式

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

选择不带有名为
数据切换
的属性的行的子行的单元格

嵌套表中也有空白。您可以删除以下内容：

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

使用这个CSS样式

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

看到这个了吗

只需添加此css并远离
！重要信息
如其他答案所示

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

永远不要使用！重要信息

这里几乎所有的答案都建议使用
！重要信息
。我认为他们都需要阅读并停止使用
！今天很重要。
在css中使用下面的代码

tr td{padding: 0!important;}

感谢您的关心
Bootstrap本身就有一个css样式。
（因此，如果要应用css样式，必须在css中使用'！important'关键字。）

而且，您的代码结构也不太好。
因此，它在每个表行内部留出了一点空间

我想你想这样做。：）

[结果]

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>

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

行：）但是折叠的行呢？空白从哪里来？@maregor我更新了代码。白色间隔是由于引导应用到类为“.table”的元素的默认css造成的。一个20px的
利润底部
。所以我再次使用JS代码删除了它：）@WouterHuysentruit更新了CSS-only-bootply，祝你玩得开心：谢谢。这就解决了问题。挑战在于了解css更改引导应用于html元素的内容。@WouterHuysentruit
。table
选择的是类
table
，而不是table标记本身。通常，除非使用
，否则无法覆盖引导默认样式！重要信息
，因为在本例中…@maregor:添加了该信息。@maregor:这是由于特殊性。无需添加
！重要信息
。应该按原样工作。这是你要找的吗？