Html 如何在引导中水平居中放置表格

这是我的密码。我要做的是把这张桌子放在容器的中心。但是，当我使用“container”类时，默认情况下它会向左对齐，当我使用div的“container fluid”类时，它会使用全宽。我希望将表格水平居中。有人能帮忙吗

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

材料名称
汇率（印度卢比）
书
7.00（每公斤）
软塑料
15.00（每公斤）
硬塑料
2.00（每公斤）

这是一个截图

我知道“ContainerFluid”使用全宽度，但我也只使用了“container”类，它没有帮助。请用css通知。

.table td {
   text-align: center;   
}

或引导：

<table class="table text-center">

---

要使表格水平居中，您可以在CSS中使用

边距

和

宽度

属性

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

现在，对于表的内容，您可以同时使用CSS和引导排版类。在本例中，CSS用于表中的

th

元素和

.text center

类

table th {
   text-align: center; 
}

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

材料名称
汇率（印度卢比）
书
7.00（每公斤）
软塑料
15.00（每公斤）
硬塑料
2.00（每公斤）
材料名称
汇率（印度卢比）
书
7.00（每公斤）
软塑料
15.00（每公斤）
硬塑料
2.00（每公斤）

只需在table类中添加一个类：

文本中心

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

... 

---

这是一个来自引导的本机类，允许水平对齐。

您可以尝试使用列类使其居中

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

---

您可以使用

CSS

将表格居中，如下所示

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

---

您需要有

边距：自动
使用此引导行/列组合，无论表格或屏幕大小如何，都可以工作，无需CSS：

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


……餐桌用品。。。。

....

从

@Rene Hamburger的评论：在链接的答案中，
w-auto
是表格保持原始自然宽度所必需的。否则它的大小将调整为100%。
这似乎对我不起作用。表格仍然在左边。这是用于引导4。我认为您必须确保表格宽度不超过屏幕宽度，因为它将保持居中，没有滚动条。要么这样，要么我做错了。col-md-4、col-md-6等可以根据表大小应用。进入CSS并添加一些代码是穷人的解决方案。像bootstrap这样的样式表之所以如此完整，正是为了避免对css进行黑客攻击。这种解决方案最大的缺点是表格的宽度，如果我们不希望它只有50%，该怎么办？Kat提供了一个很好的答案，现在与最新的Bootstrap4兼容。不需要添加css。破解css应该是最后一个选择，但不幸的是，对一些人来说，这是第一个反射。创建像bootstrap这样的大型样式表框架的原因正是为了提供一个完整的解决方案，除了颜色之类的装饰性内容之外，不需要编码css。
<div class="table-responsive">
    <table class="mx-auto w-auto">
      ....
    </table>
</div>