web-dev-qa-db-fra.com

Comment puis-je réduire une ligne de table dans Bootstrap?

J'utilise Bootstrap 2.3.2 dans mon application et je dois masquer complètement une ligne à l'aide du plugin collapse. Voici un exemple:

<!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>

Cela affichera et masquera correctement le contenu de la ligne, mais la ligne réduite sera toujours visible. Voir cette capture d'écran:

Collapsed row still visible

La ligne grise dans la capture d'écran montre la ligne supplémentaire. Que puis-je faire pour supprimer complètement cette ligne de la vue?

javascriptcsstwitter-bootstrap
31
Andrew Eisenberg

Vous utilisez Réduire sur le div à l'intérieur de la ligne de votre tableau (tr). Ainsi, lorsque vous réduisez la div, la ligne est toujours là. Vous devez le changer pour indiquer où votre identifiant et votre classe sont sur le tr au lieu du div.

Change ça:

<tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr>

pour ça:

<tr class="collapse out" id="collapseme"><td><div>Should be collapsed</div></td></tr>

JSFiddle: http://jsfiddle.net/KnuU6/21/

EDIT: Si vous ne parvenez pas à mettre à niveau vers la version 3.0.0, j'ai trouvé une solution de contournement de JQuery dans la version 2.3.2:

Supprimez votre bascule de données et votre cible de données et ajoutez ce JQuery à votre bouton.

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

51
Tricky12

Je viens juste d'avoir le même problème puisque nous utilisons toujours bootstrap 2.3.2.

Ma solution pour cela: 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>
5
trudolf

Il vous suffit de définir le remplissage de la cellule de table sur zéro. Voici un jsfiddle (avec Bootstrap 2.3.2) avec votre code légèrement modifié:

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

Le javascript est facultatif et nécessaire uniquement si vous souhaitez utiliser un remplissage de cellule autre que zéro.

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

Vous pouvez le faire sans JavaScript.

(En utilisant la réponse acceptée)

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;
}
1
Daniel Cardenas

Quelle version de Bootstrap utilisez-vous? J'ai été perplexe de ne pas pouvoir utiliser la solution de @ Chad pour jsfiddle, mais pas localement. J'ai donc vérifié la version de Bootstrap utilisé par jsfiddle et utilisant une version 3.0.0-rc1, alors que le téléchargement par défaut sur getbootstrap.com est la version 2.3.2.

En 2.3.2, la classe collapse n'était pas remplacée par la classe in. La classe in était simplement ajoutée lorsque le bouton a été cliqué. Dans la version 3.0.0-rc1, la classe collapse est correctement supprimée et la classe <tr> s'effondre.

Utilisez la solution de @ Chad pour le code HTML et essayez d’utiliser ces liens pour référencer 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>
1
stmcallister


Le problème est que l'élément de réduction (div) est imbriqué dans les éléments du tableau. La div est masquée, les tr et td de la table sont toujours visibles et certains styles css leur sont appliqués (bordure et remplissage).
Pourquoi utilisez-vous des tables? Y a-t-il une raison pour? Lorsque vous ne devez pas les utiliser, ne les utilisez pas :-)

0
chris