CSS 如何在 Bootstrap 中折叠表格行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18495653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I collapse a table row in Bootstrap?
提问by Andrew Eisenberg
I am using Bootstrap 2.3.2 in my app and I need to completely hide a row using the collapse plugin. Below is an example:
我在我的应用程序中使用 Bootstrap 2.3.2，我需要使用折叠插件完全隐藏一行。下面是一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Collapse test</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap-collapse.js"></script>
</head>
<body>
<table class="table table-bordered table-striped">
<tr>
<td>
<button type="button" class="btn" data-toggle="collapse" data-target="#collapseme">
Click to expand
</button>
</td>
</tr>
<tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr>
</table>
</body>
</html>
This will correctly show and hide the contents of the row, but the collapsed row is still visible. See this screenshot:
这将正确显示和隐藏行的内容，但折叠的行仍然可见。看这个截图：
The grey line in the screenshot shows the extra row. What can I do to completely remove this row from view?
屏幕截图中的灰线显示了额外的行。我该怎么做才能从视图中完全删除该行？
回答by Tricky12
You are using collapse on the div inside of your table row (tr). So when you collapse the div, the row is still there. You need to change it to where your id and class are on the tr instead of the div.
您正在表格行 (tr) 内的 div 上使用折叠。因此，当您折叠 div 时，该行仍然存在。您需要将其更改为您的 id 和 class 在 tr 而不是 div 上的位置。
Change this:
改变这个：
<tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr>
to this:
对此：
<tr class="collapse out" id="collapseme"><td><div>Should be collapsed</div></td></tr>
JSFiddle: http://jsfiddle.net/KnuU6/21/
JSFiddle：http: //jsfiddle.net/KnuU6/21/
EDIT: If you are unable to upgrade to 3.0.0, I found a JQuery workaround in 2.3.2:
编辑：如果您无法升级到 3.0.0，我在 2.3.2 中找到了一个 JQuery 解决方法：
Remove your data-toggle and data-target and add this JQuery to your button.
删除您的数据切换和数据目标并将此 JQuery 添加到您的按钮。
$(".btn").click(function() {
if($("#collapseme").hasClass("out")) {
$("#collapseme").addClass("in");
$("#collapseme").removeClass("out");
} else {
$("#collapseme").addClass("out");
$("#collapseme").removeClass("in");
}
});
JSFiddle: http://jsfiddle.net/KnuU6/25/
JSFiddle：http: //jsfiddle.net/KnuU6/25/
回答by trudolf
I just came up with the same problem since we still use bootstrap 2.3.2.
因为我们仍然使用引导程序 2.3.2，所以我刚刚提出了同样的问题。
My solution for this: http://jsfiddle.net/KnuU6/281/
我的解决方案：http: //jsfiddle.net/KnuU6/281/
css:
css：
.myCollapse {
display: none;
}
.myCollapse.in {
display: block;
}
javascript:
javascript:
$("[data-toggle=myCollapse]").click(function( ev ) {
ev.preventDefault();
var target;
if (this.hasAttribute('data-target')) {
target = $(this.getAttribute('data-target'));
} else {
target = $(this.getAttribute('href'));
};
target.toggleClass("in");
});
html:
html：
<table>
<tr><td><a href="#demo" data-toggle="myCollapse">Click me to toggle next row</a></td></tr>
<tr class="collapse" id="#demo"><td>You can collapse and expand me.</td></tr>
</table>
回答by marciowerner
You just need to set the table cell padding to zero. Here's a jsfiddle (using Bootstrap 2.3.2) with your code slightly modified:
您只需要将表格单元格填充设置为零。这是一个 jsfiddle（使用 Bootstrap 2.3.2），您的代码略有修改：
http://jsfiddle.net/marciowerner/fhjgn7b5/4/
http://jsfiddle.net/marciowerner/fhjgn7b5/4/
The javascript is optional and only needed if you want to use a cell padding other than zero.
javascript 是可选的，仅当您想使用零以外的单元格填充时才需要。
$('.collapse').on('show.bs.collapse', function() {
$(this).parent().removeClass("zeroPadding");
});
$('.collapse').on('hide.bs.collapse', function() {
$(this).parent().addClass("zeroPadding");
});.zeroPadding {
padding: 0 !important;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
</head>
<body>
<table class="table table-bordered table-striped">
<tr>
<td>
<button type="button" class="btn" data-toggle="collapse" data-target="#collapseme">Click to expand</button>
</td>
</tr>
<tr>
<td class="zeroPadding">
<div class="collapse out" id="collapseme">Should be collapsed</div>
</td>
</tr>
</table>
</body>回答by Daniel Cardenas
You can do this without any JavaScript involved
您可以在不涉及任何 JavaScript 的情况下执行此操作
(Using accepted answer)
（使用接受的答案）
HTML
HTML
<table class="table table-bordered table-striped">
<tr>
<td><button class="btn" data-target="#collapseme" data-toggle="collapse" type="button">Click to expand</button></td>
</tr>
<tr>
<td class="nopadding">
<div class="collapse" id="collapseme">
<div class="content">
Show me collapsed
</div>
</div>
</td>
</tr>
</table>
CSS
CSS
.nopadding {
padding: 0 !important;
}
.content {
padding: 20px;
}
回答by stmcallister
Which version of Bootstrap are you using? I was perplexed that I could get @Chad's solution to work in jsfiddle, but not locally. So, I checked the version of Bootstrap used by jsfiddle, and it's using a 3.0.0-rc1 release, while the default download on getbootstrap.com is version 2.3.2.
您使用的是哪个版本的 Bootstrap？我很困惑我可以让@Chad 的解决方案在 jsfiddle 中工作，但不能在本地工作。因此，我检查了 jsfiddle 使用的 Bootstrap 版本，它使用的是 3.0.0-rc1 版本，而 getbootstrap.com 上的默认下载版本是 2.3.2。
In 2.3.2 the collapseclass wasn't getting replaced by the inclass. The inclass was simply getting appended when the button was clicked. In version 3.0.0-rc1, the collapseclass correctly is removed, and the <tr>collapses.
在 2.3.2 中，collapse类没有被in类取代。该in被点击的按钮，当类是仅仅让追加。在 3.0.0-rc1 版本中，collapse该类被正确删除，并且<tr>崩溃。
Use @Chad's solution for the html, and try using these links for referencing Bootstrap:
对 html 使用 @Chad 的解决方案，并尝试使用这些链接来引用 Bootstrap：
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
回答by chris
problem is that the collapse item (div) is nested in the table elements. The div is hidden, the tr and td of the table are still visible and some css-styles are applied to them (border and padding).
Why are you using tables? Is there a reason for? When you dont′t have to use them, dont′use them :-)
问题是折叠项（div）嵌套在表格元素中。div 被隐藏，表格的 tr 和 td 仍然可见，并且对它们应用了一些 css 样式（边框和填充）。
你为什么使用表格？有原因吗？当你不需要使用它们时，不要使用它们 :-)
