blocks|key|2150075|text|这似乎已经被问过了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2150076|这可能会有所帮助：|2150077|Twitter+Bootstrap+Use+collapse.js+on+table+cells+[Almost+Done]|offset|length|2150078|更新：|2150079|你的提琴没有加载jQuery，所以一切都正常。|2150080|<table+class="table+table-hover">
<thead>
++<tr>
++++<th></th>
++++<th></th>
++++<th></th>
++</tr>
</thead>

<tbody>
++++<tr+data-toggle="collapse"+data-target="#accordion"+class="clickable">
++++++++<td>Some+Stuff</td>
++++++++<td>Some+more+stuff</td>
++++++++<td>And+some+more</td>
++++</tr>
++++<tr>
++++++++<td+colspan="3">
++++++++++++<div+id="accordion"+class="collapse">Hidden+by+default</div>
++++++++</td>
++++</tr>
</tbody>
</table>|code-block|syntax|javascript|2150081|试试这个：http://jsfiddle.net/Nb7wy/2/|2150082|我还将colspan='2'添加到了详细信息行。但它本质上是你摆弄加载的jQuery+(在左列的框架中)。|style|CODE|2150083|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/16389775/twitter-bootstrap-use-collapse-js-on-table-cells-almost-done|1|http://jsfiddle.net/Nb7wy/2/^0|0|0|0|1Q|0|0|0|0|0|5|S|1|0|3|B|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@$F|19|G|1A|1|1B]]|A|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1D|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1E|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@$F|1G|G|1H|1|1I]]|A|$]]|$1|S|3|T|5|6|7|1J|8|@$F|1K|G|1L|U|V]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

<p>This seems to be already asked before:</p>

<p>This might help:</p>

<p><a href="https://stackoverflow.com/questions/16389775/twitter-bootstrap-use-collapse-js-on-table-cells-almost-done">Twitter Bootstrap Use collapse.js on table cells [Almost Done]</a></p>

<p>UPDATE:</p>

<p>Your fiddle wasn't loading jQuery, so anything worked.</p>

<pre class="lang-html prettyprint-override"><code>&lt;table class="table table-hover"&gt;
&lt;thead&gt;
  &lt;tr&gt;
    &lt;th&gt;&lt;/th&gt;
    &lt;th&gt;&lt;/th&gt;
    &lt;th&gt;&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;

&lt;tbody&gt;
    &lt;tr data-toggle="collapse" data-target="#accordion" class="clickable"&gt;
        &lt;td&gt;Some Stuff&lt;/td&gt;
        &lt;td&gt;Some more stuff&lt;/td&gt;
        &lt;td&gt;And some more&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="3"&gt;
            &lt;div id="accordion" class="collapse"&gt;Hidden by default&lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>Try this one:
<a href="http://jsfiddle.net/Nb7wy/2/" rel="noreferrer">http://jsfiddle.net/Nb7wy/2/</a></p>

<p>I also added <code>colspan='2'</code> to the details row. But it's essentially your fiddle with jQuery loaded (in frameworks in the left column)</p>


blocks|key|4467102|text|对于任何来这里寻找如何获得真正的折叠效果并且一次只允许展开一行的人来说，您可以为show.bs.collapse添加一个事件处理程序，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4467103|$('.collapse').on('show.bs.collapse',+function+()+{
++++$('.collapse.in').collapse('hide');
});|code-block|syntax|javascript|4467104|我在这里修改了this示例：http://jsfiddle.net/QLfMU/116/|offset|length|4467105|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/16864694/4186945|1|http://jsfiddle.net/QLfMU/116/^0|0|0|7|4|0|E|U|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]|$I|10|J|11|1|12]]|A|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]]]

<p>For anyone who came here looking for how to get the true accordion effect and only allow one row to be expanded at a time, you can add an event handler for show.bs.collapse like so:</p>

<pre><code>$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});
</code></pre>

<p>I modified <a href="https://stackoverflow.com/a/16864694/4186945">this</a> example to do so here: <a href="http://jsfiddle.net/QLfMU/116/" rel="noreferrer">http://jsfiddle.net/QLfMU/116/</a></p>


blocks|key|4467140|text|在可接受的答案中，当可扩展行被隐藏时，可见行之间会出现令人讨厌的间距。您可以通过将此代码添加到css中来摆脱这种情况：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4467141|.collapse-row.collapsed+%2B+tr+{
+++++display:+none;
}|code-block|syntax|javascript|4467142|'%2B‘是折叠的，所以如果你想让你的可展开行成为下一行，这会选择下一个tr，紧跟在tr后面的tr名为adjacent+sibling+selector+-+row。|offset|length|4467143|这里是最新的fiddle：http://jsfiddle.net/Nb7wy/2372/|4467144|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors|1|http://jsfiddle.net/Nb7wy/2372/^0|0|0|1D|P|0|0|D|V|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>In the accepted answer you get annoying spacing between the visible rows when the expandable row is hidden. You can get rid of that by adding this to css: </p>

<pre><code>.collapse-row.collapsed + tr {
     display: none;
}
</code></pre>

<p>'+' is <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors" rel="noreferrer">adjacent sibling selector</a>, so if you want your expandable row to be the next row, this selects the next tr following tr named collapse-row.</p>

<p>Here is updated fiddle: <a href="http://jsfiddle.net/Nb7wy/2372/" rel="noreferrer">http://jsfiddle.net/Nb7wy/2372/</a></p>


<p>I have a table that's populated from a database which has lots of columns (around 30). A solution someone thought of was to create an accordion out the table, where each row is clickable and will accordion downwards with the rest of the columns worth of information. I am having trouble getting Bootstrap to do this properly for me.</p>

<pre class="lang-html prettyprint-override"><code>&lt;table class="table table-hover"&gt;
    &lt;thead&gt;
        &lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;
    &lt;/thead&gt;

    &lt;tbody&gt;
        &lt;tr data-toggle="collapse" data-target="#accordion" class="clickable"&gt;
            &lt;td&gt;Some Stuff&lt;/td&gt;
            &lt;td&gt;Some more stuff&lt;/td&gt;
            &lt;td&gt;And some more&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;div id="accordion" class="collapse"&gt;Hidden by default&lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>As you can see from the <a href="http://jsfiddle.net/Nb7wy/1/" rel="noreferrer">jsfiddle</a>, this functionality is not working. Im not really sure what's wrong, and Bootstrap's docs don't go into much detail on collapsing.</p>

<p>Any assistance would be greatly appreciated, thanks!</p>


Creating Accordion Table with Bootstrap

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个从数据库填充的表，该数据库有很多列(大约30列)。有人想到的一个解决方案是在表格之外创建一个手风琴，其中每一行都是可点击的，并将与信息的其余列一起向下折叠。我很难让Bootstrap为我正确地做这件事。<table class="table table-hover">    <thead>        <th...

问用Bootstrap创建Accordion表
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用Bootstrap创建Accordion表EN