Question

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

我有行，我希望每行都展开以显示其他行，但即使隐藏行未展开，我也无法摆脱空白。我认为可能有一种方法可以在JS中编写函数，但是有更快更简单的方法吗？

此外，当展开折叠的行时，会有一些空格，我试图更改div的某些属性无效。

Answer 1

Bootstrap本身就有css风格。（所以，如果你想应用你的CSS风格，你必须在你的CSS中使用＆＃39;！important＆＃39; 关键字。）

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

我想你想这样做。：）

[结果] JAR : MANIFEST.MF Class-Path referencing a directory

<强> 1。 HTML来源

Class-Path:

<强> 2。 CSS来源

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

Answer 2

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

删除折叠行中的空格

2 个答案: