Comment ajouter des bordures à un Réactif de Table dans le Bootstrap 3

J'ai de la difficulté avec l'ajout d'un cadre à un réactif de table à l'aide de bootstrap.

<div class="panel">
    <div class="table-responsive text-center">

    <table class="table table-bordered">
        <thead> ... </thead>
        <tbody> ... </tbody>
    </table>

    </div>
</div>

Le tableau de bordure ne fonctionne que si je supprime le tableau "sensible" de la classe.

Qu'est-ce que mon code manquant de sorte qu'il fonctionne avec cette classe, aussi bien en classe?

  • Semble être fonctionne très bien jsfiddle.net/t1te9ccy/1
  • Il n'est pas. Supprimer la table "sensibles" dans le premier exemple et vous verrez que la frontière extérieure va le montrer.
InformationsquelleAutor Jorge Cuevas | 2016-05-24
  1. 7

    Semble être votre panneau de classe a d'une propriété CSS

    .panel>.table-bordered, .panel>.table-responsive>.table-bordered {border:0;}

    et qui fait de votre table à l'extérieur des frontières invisibles. Vous pouvez prévoir explicitement

    border: 1px solid #ddd !important; si nécessaire.

    <div class="panel">
    <div class="table-bordered table-responsive text-center">

    <table class="table table-bordered" style="border: 1px solid #ddd !important;">
        <thead> ... </thead>
        <tbody> ... </tbody>
    </table>

    </div>
</div>

    Ou vous pouvez retirer le panneau de la classe et d'utiliser quelque chose d'autre. Cela pourrait également travailler. Vous pouvez toujours chercher inspecter l'élément de voir quelle classe et quelle propriété CSS de n'importe quel élément est à l'aide.

    Encore, vous n'aurez pas de frontière. Aussi, assurez-vous que la table de la couleur de la bordure et la couleur d'arrière-plan ne sont pas les mêmes.

    • Merci pour la réponse, mais il ne résout pas le problème, j'avais peut-être pour être plus explicite, la table a des frontières entre les éléments, mais il n'a pas outter frontière délimitant la table elle-même. Je suis à la recherche d'ajouter n'frontières
    • Vérifier la réponse encore une fois. Qui était le groupe de la classe css qui remplace bordure du tableau.
    • Supplémentaire du côlon dans le CSS ci-dessus. Fixe: border: 1px solid #ddd !important;
    • Vous êtes les bienvenus. Content que cela fonctionne.. je n'ai pas l'esprit si vous aussi vous faire voter 😉
    InformationsquelleAutor Lahar Shah
  2. 3

    Je vois aussi ce problème par hasard. Il est très intéressant que j'ai trouvé:

    à l'intérieur d'une requête de média screen and (max-width: 767px), ce qui signifie que sur un petit écran de l'appareil,
    ou à l'intérieur d'un panneau,

    .table-responsive > .table-bordered sont définies pour n'ont pas de frontières dans Bootstrap3. Je ne sais pas une raison pour Bootstrap intentionnellement faire.

    Partie de Bootstrap3 code source ressemble:

    @media screen and (max-width: 767px) {
...
  .table-responsive > .table-bordered {
    border: 0;
  }
...
}

.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
  border: 0;
}

    Mise à jour: j'ai un peu de savoir la raison pour laquelle le Bootstrap est de le faire. Pour l'écran étroit, <div class="table-responsive"> a une frontière elle-même. Aussi, si un tableau de bordure est un enfant direct de <div class="panel">, le comité devrait agir comme une frontière de la table. Donc, Bootstrap volontairement supprimé la frontière extérieure de votre table à l'intérieur de ces divs.

    Vous de ne rien manquer dans votre code. Vous êtes tout simplement pas l'utiliser de la manière Bootstrap recommande.

    • Qu'est ce qu'il fait qui est à l'encontre des recommandations?
    InformationsquelleAutor jlwangPoincare