如何在 Bootstrap 中水平居中表格

Question

这是我的代码。我想要做的是将这张桌子放在容器的中心。但是，当我使用“容器”类时，它默认向左对齐，而当我为 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>

这是一个屏幕截图。

我知道“容器流体”使用全宽度，但我也只使用了“容器”类，它没有帮助。请指教。

原文由 Amod Gaikwad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

从 具有 100% 宽度的中心引导表中 获取解决方案

@Rene Hamburger 的评论：如链接答案中所示，表格需要 w-auto 以保持其原始的自然宽度。否则，它的大小将调整为 100%。

原文由 Grigory Kislin 发布，翻译遵循 CC BY-SA 4.0 许可协议