关于css:Bootstrap手风琴折叠时的双边框 | 珊瑚贝

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

图片:
注意行折叠时的双边框

enter

  • 任何可用的小提琴演示?
  • 当然; jsfiddle.net/thmcts1j 小提琴上不存在双线。也许是while循环引起的?


它实际上有一个非常简单的解决方案,只是将隐藏的 TD 设置为边框:none


来源:https://www.codenong.com/34175629/

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?