Wie Rahmen hinzufügen, um eine Ansprechende Tabelle in Bootstrap 3

Ich habe Probleme mit dem hinzufügen Grenzen, um eine responsive Tabelle mit bootstrap.

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

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

    </div>
</div>

Das grenzt Tabelle funktioniert nur, wenn ich entfernen Sie die "table-responsive" - Klasse.

Was ist mein code fehlen also es funktioniert mit dieser Klasse sowie Klasse?

  • Scheint zu funktionieren nur fine jsfiddle.net/t1te9ccy/1
  • Das ist es nicht. Entfernen Sie "table-responsive" aus dem ersten Beispiel, und Sie werden sehen, dass der äußere Rahmen wird sich zeigen.
InformationsquelleAutor Jorge Cuevas | 2016-05-24
  1. 7

    Scheint, wie Sie Ihre panel-Klasse hat eine CSS-Eigenschaft

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

    - und das macht Ihre Tabelle ist die äußere Grenze unsichtbar. Sie können explizit angeben

    border: 1px solid #ddd !important; wenn nötig.

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

    Oder Sie können entfernen Sie die panel-Klasse und verwenden Sie etwas anderes. Das könnte auch funktionieren. Sie können den Blick immer nur auf element untersuchen, um zu sehen, welche Klassen und welche CSS-Eigenschaft jedes Elements verwendet wird.

    Immer noch, Sie wird nicht die Grenze. Auch, stellen Sie sicher, dass die Tabelle die border-Farbe und hintergrund-Farbe sind nicht das gleiche.

    • Danke für die Antwort aber es hat nicht das Problem lösen, vielleicht hatte ich etwas präziser werden, hat die Tabelle die Grenzen zwischen den Elementen, aber es hat nicht outter Grenze zur Abgrenzung der Tabelle selbst. Ich bin auf der Suche hinzufügen, hat Grenzen
    • Schauen Sie einmal beantworten. Das war Bedienfeld css-Klasse, die anstelle der Tabelle border.
    • Extra Doppelpunkt in der CSS oben. Behoben: border: 1px solid #ddd !important;
    • Dass es behoben, Kennzeichnung als beantwortet, danke.
    • Sie sind herzlich willkommen. Froh, dass es funktioniert.. ich habe nichts dagegen, wenn Sie auch noch Stimmen 😉
    InformationsquelleAutor Lahar Shah
  2. 3

    Ich auch sehen, dass dieses Problem durch Zufall. Es ist sehr interessant, dass ich gefunden habe:

    innerhalb einer media query screen and (max-width: 767px), was bedeutet, auf einem schmalen-screen-Gerät,
    oder in einem Schaltschrank,

    .table-responsive > .table-bordered sind keine Grenzen in Bootstrap3. Ich kenne keinen Grund für die Bootstrap-absichtlich, dies zu tun.

    Dass ein Teil von Bootstrap3-source-code sieht wie folgt aus:

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

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

    Update: ich Art von wissen, der Grund, warum Bootstrap ist, das zu tun. Für schmale Bildschirm <div class="table-responsive"> hat eine Grenze selbst. Auch, wenn einer eingerahmten Tabelle ist ein direktes Kind der <div class="panel"> das Gremium handeln würde, wie eine Grenze der Tabelle. Also Bootstrap absichtlich entfernt die äußere Umrandung der Tabelle in diese divs.

    Sind Sie nicht etwas fehlt in deinem code. Sie sind nur nicht mit der Art und Weise Bootstrap empfiehlt.

    • Was wird er tun, gegen Empfehlungen?
    InformationsquelleAutor jlwangPoincare
Schreibe einen Kommentar