Zentrieren einer Bootstrap-Tabelle in einem Akkordeon-Panel

Question

Ich habe Schwierigkeiten, einen Tisch zu zentrieren, den ich in ein Panel eines Akkordeon-Reglers auf meiner Website gelegt habe. Die Seite ich spreche, ist dies: http://www.smartcuts.ch/index-TEST.html#latest

Meine html

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-11"> 
     <div class="table-responsive"> 

     <table summary="This table shows our rates" class="table table-condensed table-striped"> 

Kann ich die Tabelle in der Plattenmitte einen Befehl in diesem HTML verwenden oder muss ich CSS verwenden? Wenn ja, bitte erleuchte mich. Ich habe alle möglichen Sachen ausprobiert, aber nichts scheint zu funktionieren.

Vielen Dank.

Answer 1

Sie müssen:

• die container Klasse entfernen oder schließlich .container-fluid
• Verwendung col-xs-12 statt col-xs-11 verwenden. Hier

ist der Arbeitscode:

<div><!-- removed class .container --> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <div class="table-responsive"> 

     <table summary="This table shows our rates" class="table table-condensed table-striped"> 
      <!-- Table content here--> 
     </table> 

     </div><!--end of .table-responsive--> 
    </div> 
    </div> 
</div> 

ENDERGEBNIS:

Answer 2

Sie müssen nicht die Container-Klasse töten, können Sie aktualisieren es zu .container-Flüssigkeit. Und Sie müssen nicht .col-xs-11 in .col-xs-12 ändern.

Sie können dem .col-xs-11-div eine ID hinzufügen und zwei Stile überschreiben, um das div anstelle der Tabelle selbst zu zentrieren. Ich nehme an, dass Sie .col-xs-11 gewählt haben, weil Sie diese spezifische Breite wollten, und da die Tabelle reaktionsfähig ist, erbt sie die Breite des enthaltenden div.

HTML:

<div class="container-fluid"> 
    <div class="row"> 
     <div id="center-table" class="col-xs-11"> 
      <div class="table-responsive"> 

CSS:

#center-table{ 
    float: none; 
    margin: 0 auto; 
} 

Arbeits JS Geige Beispiel:

https://jsfiddle.net/joeydehnert/oczyocwp