Double border on Bootstrap accordion when collapsed
我有一个页面在 while 循环中显示来自 db 的信息。使用 Bootstrap 表和 var $loopcounter 为每一行提供一个单独的 id。单击一行时，我可以扩展每一行的信息。多亏了 SO 和 Google，这很完美。
我现在的问题是表格显示隐藏/折叠行的双线。我尝试了几种解决方案，例如 padding:0 !important、border-color:#FFF、border-color: none，似乎没有任何效果。还尝试了 colspan，但这只会进一步扩展双线。
HTML:
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<table class="table table-striped table-hover">
<thead> <th>Name</th> <th>Age</th> <th>Adr</th> </thead> <tbody> <?php while ($row = $variable->fetch()) { $loopcounter++ ;?> <tr data-toggle="collapse" data-target="#row<?php echo $loopcounter; ?>" class="accordion-toggle"> <td><?php echo $row[‘name’]; ?></td> <td><?php echo $row[‘age’]; ?></td> <td><?php echo $row[‘adr’]; ?></td> </tr> <tr> <td class="hiddenRow">"> <table> <thead><tr><td>Some Header</td></tr></thead> <tbody><tr><td><?php echo $row[‘name’]; ?></td></tr></tbody> </table> </td> </tr> <?php } ?> </tbody> </table> |
CSS:
|
1
2 3 4 |
.hiddenRow {
padding: 0 !important; border-color: FFF; } |
图片：
注意行折叠时的双边框
它实际上有一个非常简单的解决方案，只是将隐藏的 TD 设置为边框：none
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269247.html