Hinzufügen von Rahmen zu einer Responsive-Tabelle in Bootstrap 3

Ich habe Probleme mit dem Hinzufügen von Rahmen zu einer reaktionsfähigen Tabelle mit Bootstrap.Hinzufügen von Rahmen zu einer Responsive-Tabelle in Bootstrap 3

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

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

    </div> 
</div>

Die umrandete Tabelle funktioniert nur, wenn ich die "table reaktionsfähige" Klasse entfernen.

Was ist mein Code fehlt, so funktioniert es mit dieser Klasse als auch Klasse?

Quelle

2016-05-24 Jorge Cuevas

Scheint gut zu funktionieren https://jsfiddle.net/t1te9ccy/1/ –

@AdamBuchananSmith Es ist nicht. Entfernen Sie "table responsive" aus dem ersten Beispiel und Sie werden sehen, dass der äußere Rahmen angezeigt wird. – Gustavo

Scheint, wie Ihre Panel-Klasse

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

eine CSS-Eigenschaft hat und das macht äußeren Rand unsichtbar Ihren Tisches. Sie können bei Bedarf explizit

border: 1px solid #ddd !important; angeben.

<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 Panel-Klasse entfernen und etwas anderes verwenden. Das könnte auch funktionieren. Sie können immer nach inspect-Element suchen, um zu sehen, welche Klassen und welche css-Eigenschaft ein beliebiges Element verwendet.

Noch werden Sie keine Grenze bekommen. Stellen Sie außerdem sicher, dass die Rahmenfarbe und die Hintergrundfarbe der Tabelle nicht übereinstimmen.

Quelle

2016-05-24 19:07:20

Danke für die Antwort, aber es hat das Problem nicht gelöst, vielleicht musste ich expliziter sein, die Tabelle hat Grenzen zwischen den Elementen, aber sie hat keinen äußeren Rahmen, der die Tabelle selbst begrenzt. Ich suche nach Grenzen hinzufügen –

Überprüfen Sie die Antwort erneut. Das war die CSS-Klasse der Panel-Klasse, die den Rand der Tabelle überschreibt. –

Zusätzlicher Doppelpunkt im obigen CSS. Behoben: 'border: 1px solid #ddd! Wichtig;' – aardrian

Ich sehe dieses Problem auch zufällig. Es ist sehr interessant, dass ich gefunden:

in einer Medienabfrage screen and (max-width: 767px), die auf einem schmalen Bild-Gerät bedeutet, oder in einem Panel,

.table-responsive > .table-bordered gesetzt sind keine Grenzen in Bootstrap3 haben. Ich kenne keinen Grund dafür, dass Bootstrap das absichtlich macht.

Der Teil des Bootstrap3 Quellcode wie folgt aussieht:

@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 der Grund, warum Bootstrap das tut. Für einen schmalen Bildschirm hat <div class="table-responsive"> eine Umrandung. Wenn eine umrandete Tabelle ein direkt untergeordnetes Objekt von <div class="panel"> ist, verhält sich das Panel wie eine Umrandung dieser Tabelle. So entfernt Bootstrap absichtlich den äußeren Rand Ihrer Tabelle innerhalb dieser divs.

Sie verpassen nichts in Ihrem Code. Sie verwenden es nicht so, wie Bootstrap es empfiehlt.

Quelle

2016-11-12 08:25:05 jlwangPoincare

Was macht er damit gegen Empfehlungen? – Gustavo

Hinzufügen von Rahmen zu einer Responsive-Tabelle in Bootstrap 3

Antwort

Verwandte Themen