发表新帖
发表新帖

How do I collapse a table row in Bootstrap?

前端 未结
关注
6 902
予麋鹿
予麋鹿 2020-12-13 18:29

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:
相关标签:
6条回答
  • 無奈伤痛
    2020-12-13 18:32

    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.

    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/

    EDIT: If you are unable to upgrade to 3.0.0, I found a JQuery workaround in 2.3.2:

    Remove your data-toggle and data-target and add this JQuery to your button.

    $(".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/

    0 讨论(0)
  • 北荒
    2020-12-13 18:32

    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:

    http://jsfiddle.net/marciowerner/fhjgn7b5/4/

    The javascript is optional and only needed if you want to use a cell padding other than zero.

    $('.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>

    0 讨论(0)
  • 时光取名叫无心
    2020-12-13 18:40

    You can do this without any JavaScript involved

    (Using accepted answer)

    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

    .nopadding {
    padding: 0 !important;
}

.content {
    padding: 20px;
}
    0 讨论(0)
  • 谎友^
    2020-12-13 18:45


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

    0 讨论(0)
  • 刺人心
    2020-12-13 18:52

    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.

    In 2.3.2 the collapse class wasn't getting replaced by the in class. The in class was simply getting appended when the button was clicked. In version 3.0.0-rc1, the collapse class correctly is removed, and the <tr> collapses.

    Use @Chad's solution for the html, and try using these links for referencing 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>
    0 讨论(0)
  • 忘掉有多难
    2020-12-13 18:54

    I just came up with the same problem since we still use bootstrap 2.3.2.

    My solution for this: http://jsfiddle.net/KnuU6/281/

    css: 

    .myCollapse {
    display: none;
}
.myCollapse.in {
    display: block;
}

    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: 

    <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>
    0 讨论(0)
 看不清?
提交回复
热议问题