如何在Bootstrap中将表格水平居中 [英] How do I horizontally center a table in Bootstrap

问题描述

这是我的代码.我正在尝试做的就是将此表放在容器的中央.但是，相反，当我使用容器"或容器"时，默认情况下它会向左对齐.类，当我使用容器-流体类"时，它使用全宽对于div.我想将桌子水平居中.有人可以帮忙吗?

This my code. What I'm trying to do is to get this table at the center of the container. But instead, it aligns to the left by default when I use the "container" class, and it uses the full width when I use the "container-fluid class" for the div. I want to horizontally center the table. Can anyone help?

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

这是屏幕截图.

我知道容器流体"是指使用整个宽度，但我也使用了容器"仅上课，无济于事.请告知.

I know "container-fluid" uses the full width, but I have also used "container" class only and it does not help. Please advise.

推荐答案

不管表或屏幕的大小如何，使用此Bootstrap行/列组合均有效，无需CSS:

Using this Bootstrap row/column combination works regardless of the size of your table or screen, no CSS necessary:

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

这篇关于如何在Bootstrap中将表格水平居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！