如何在 Bootstrap 中水平居中表格答案

【问题标题】：How do I horizontally center a table in Bootstrap如何在 Bootstrap 中水平居中表格
【发布时间】：2016-11-04 18:47:38
【问题描述】：

这是我的代码。我想要做的是将这张桌子放在容器的中心。但是，当我使用“容器”类时，它默认向左对齐，而当我为 div 使用“容器流体类”时，它使用全宽。我想将表格水平居中。有人可以帮忙吗？

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

这是截图。

我知道“container-fluid”使用全宽，但我也只使用了“container”类，它没有帮助。请指教。

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

无论您的表格或屏幕大小如何，都可以使用此 Bootstrap 行/列组合，无需 CSS：

<div class="row justify-content-center">
    <div class="col-auto">
      <table class="table table-responsive">
        ....table stuff....
      </table>
    </div>
  </div>

【讨论】：

这是用于引导程序 4。
我认为您必须确保表格宽度不超过屏幕宽度，因为它将保持居中，没有滚动条。要么那个，要么我做错了什么。
col-md-4, col-md-6 等可以根据表格大小应用。
非常聪明的解决方案，谢谢！

【解决方案2】：

要使表格本身水平居中，您可以在 CSS 中使用 margin 和 width 属性。

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

现在，对于表格的内容，您可以结合使用 CSS 和 Bootstrap 排版类。在这种情况下，th 元素的 CSS 和表中的 .text-center 类。

table th {
   text-align: center; 
}

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

您可以在这里看到 .container-fluid 和 .container 类：

table th {
   text-align: center; 
}

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

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

【讨论】：

进入 CSS 并添加一些代码是一个穷人的解决方案。 bootstrap 之类的样式表之所以如此完整，正是为了避免对 css 进行 hack。
这个解决方案最大的取款是桌子的宽度，如果我们不希望它只有50%怎么办？ Kat 提供了一个很好的答案，现在与最新的 bootstrap 4 兼容。

【解决方案3】：

<div class="table-responsive">
    <table class="mx-auto w-auto">
      ....
    </table>
</div>

从Center bootstrap table with 100% width获取解决方案
来自@Rene Hamburger 的评论：如链接答案中所示，表格需要w-auto 才能保持其原始的自然宽度。否则将其大小调整为 100%。

【讨论】：

【解决方案4】：

只需在表类中添加一个类：text-center。

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

它是来自 Bootstrap 的原生类，允许水平对齐。

【讨论】：

【解决方案5】：

您可以使用CSS 使表格居中，如下所示。

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

你需要有margin: auto

【讨论】：

不需要添加css。破解 css 应该是最后的选择，但不幸的是，对于某些人来说，这是第一反应。之所以创建像 bootstrap 这样的大型样式表框架，正是为了提供一个完整的解决方案，除了颜色之类的装饰性内容之外，不需要编写 css 代码。

【解决方案6】：

用css

.table td {
   text-align: center;   
}

https://jsfiddle.net/8s9918my/

或引导：

<table class="table text-center">

【讨论】：

这似乎对我不起作用。桌子还在左边。

【解决方案7】：

您可以尝试将列类设为中心

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

【讨论】：