comment puis-je horizontalement centre d'une table dans le bootstrap

Ce mon code. Ce que j'essaie de faire est d'obtenir cette table au centre du récipient. Mais au lieu de cela, il s'aligne sur la gauche par défaut lorsque j'utilise le "contenant" de la classe et il utilise la totalité de la largeur lorsque j'utilise le "conteneur de liquide de classe" pour la div. Je veux horizontalement au centre de la table. Quelqu'un peut-il aider?

<!-- Container (Pricing Section) -->
<div id="pricing" class="container-fluid">
<table class="table table-bordered table-striped">
<thead><tr>
<th>Material Name</th>
<th>Rate (INR)</th>
</tr>
</thead>
<tbody style="">
<tr>
<td>Books</td>
<td>7.00(per KG)</td>

</tr>
<tr>
<td>Soft Plastic</td>
<td>15.00(per KG)</td>

</tr>
<tr>
<td>Hard Plastic</td>
<td>2.00(per KG)</td>

</tr>
</tbody>
</table>
<div>

Voici une capture d'écran
Capture d'écran

Je sais "container-fluid" utilise la totalité de la largeur, mais j'ai également utilisé des "conteneur" de la classe, mais elle n'aide pas.
Veuillez informer...

InformationsquelleAutor Amod Gaikwad | 2016-07-02
  1. 6

    À l'horizontale centre de la table, vous pouvez utiliser un CSS, le margin et width propriétés.

    .table {
   margin: auto;
   width: 50% !important; 
}

    Maintenant, pour le contenu de la table, vous pouvez utiliser une combinaison de CSS et Bootstrap typographie classes. Dans ce cas, CSS pour la th éléments, et la .text-center de classe à votre table. 

    table th {
   text-align: center; 
}

<table class="table table-bordered table-striped text-center">
    <!-- Content of the table -->
</table>

    Ici vous pouvez voir à la fois .container-fluid et .container classes:

    CSS:

    table th {
   text-align: center; 
}

.table {
   margin: auto;
   width: 50% !important; 
}

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- container-fluid -->
<div id="pricing" class="container-fluid">
<table class="table table-bordered table-striped text-center">
   <thead>
       <tr>
          <th>Material Name</th>
          <th>Rate (INR)</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Books</td>
           <td>7.00(per KG)</td>
       </tr>
       <tr>
           <td>Soft Plastic</td>
           <td>15.00(per KG)</td>
       </tr>
   <tr>
       <td>Hard Plastic</td>
       <td>2.00(per KG)</td>
   </tr>
   </tbody>
</table>
  
<!-- container -->
<div id="pricing" class="container">
<table class="table table-bordered table-striped text-center">
   <thead>
       <tr>
          <th>Material Name</th>
          <th>Rate (INR)</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Books</td>
           <td>7.00(per KG)</td>
       </tr>
       <tr>
           <td>Soft Plastic</td>
           <td>15.00(per KG)</td>
       </tr>
   <tr>
       <td>Hard Plastic</td>
       <td>2.00(per KG)</td>
   </tr>
   </tbody>
</table>

    InformationsquelleAutor CeAlCuadrado
  2. 5

    Vous pouvez centre de la table comme suit, avec CSS. 

    .table {
    width: 50%;
    margin: 0 auto !important;
}

    Vous avez besoin d'avoir margin: auto

    InformationsquelleAutor Dulith De Costa
  3. 2

    Avec css

    .table td {
   text-align: center;   
}

    https://jsfiddle.net/8s9918my/

    Ou bootstrap: 

    <table class="table text-center">
    • Cela ne semble pas fonctionner pour moi. La table est toujours sur la gauche.
    • Bootstrap a travaillé pour moi de vous remercier @hearner
    InformationsquelleAutor Hearner
  4. 2

    Il suffit d'ajouter une classe: text-center dans le tableau de la classe.

    <table class="table text-center"> 
... 
</table>

    C'est un natif de la classe de Bootstrap qui permet d'alignement horizontal.

    InformationsquelleAutor Luiz Gonçalves
  5. 0

    Vous pouvez essayer de la colonne de classes en faire le centre de

    <div class="row col-md-4 col-md-push-4"><!-- you can use column classes md-3,md-5 as per your table width -->
<table class="yourtableclasses">
<!-- table content -->
</table>
</div>
    • Il veut au centre de l'ensemble de la table pas son contenu...
    InformationsquelleAutor RAVI PATEL
  6. 0

    À l'aide de cette amorce de ligne/colonne combinaison fonctionne quelle que soit la taille de votre table ou de l'écran, pas de CSS nécessaire:

    <div class="row justify-content-center">
    <div class="col-auto">
      <table class="table table-responsive">
        ....table stuff....
      </table>
    </div>
  </div>
    • C'est pour bootstrap 4.
    InformationsquelleAutor Kat
  7. 0
    <div class="table-responsive">
    <table class="mx-auto">
      ....
    </table>
</div>

    Prendre la solution de Centre de bootstrap table avec 100% de largeur

    InformationsquelleAutor GKislin