如何在Bootstrap中将表水平居中

1bqhqjot 于 12个月前发布在 Bootstrap

关注(0)|答案(8)|浏览(138)

这是我的代码。我想做的是让这个表格位于容器的中心。但是，当我使用“container”类时，它默认向左对齐，当我使用“container-fluid”类作为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>

字符串
这是一个截图。
x1c 0d1x的数据
我知道“container-fluid”使用全宽度，但我也只使用了“container”类，这没有帮助。请告知。

twitter-bootstrap

来源：https://stackoverflow.com/questions/38160951/how-do-i-horizontally-center-a-table-in-bootstrap

8条答案

按热度按时间

2hh7jdfx1#

使用这个Bootstrap行/列组合，无论你的表格或屏幕的大小如何，都不需要CSS：

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

字符串

赞(0）回复(0）举报 12个月前

umuewwlo2#

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

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

字符串
现在，对于表的内容，您可以使用CSS和Bootstrap排版类的组合。在本例中，CSS用于th元素，而.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>

的字符串

赞(0）回复(0）举报 12个月前

qkf9rpyu3#

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

字符串
从Center bootstrap table with 100% width取溶液
来自@Rene Hamburger的评论：与链接的答案一样，w-auto是表格保持其原始自然宽度所必需的。否则，它将被调整为100%。

赞(0）回复(0）举报 12个月前

slhcrj9b4#

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

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

字符串
它是Bootstrap中的一个原生类，允许水平对齐。

赞(0）回复(0）举报 12个月前

23c0lvtd5#

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

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

字符串
你需要有margin: auto

赞(0）回复(0）举报 12个月前

fae0ux8s6#

您可以尝试列类使其中心

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

字符串

赞(0）回复(0）举报 12个月前

sulc1iza7#

用css

.table td {
   text-align: center;   
}

字符串
https://jsfiddle.net/8s9918my/
或者 Bootstrap ：

<table class="table text-center">

型

赞(0）回复(0）举报 12个月前

dldeef678#

使用mx-auto将表水平居中.

<div class='col-5 mx-auto'>
    <table class='table'>
        ...   
    </table>
</div>

字符串

<!DOCTYPE html>

<head>
  <link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet'>
</head>

<body>
  <div class='col-5 mx-auto'>
    <table class='table'>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>30</td>
          <td>USA</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>25</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Mark Johnson</td>
          <td>35</td>
          <td>UK</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

型

赞(0）回复(0）举报 12个月前

我来回答

如何在Bootstrap中将表水平居中

8条答案

相关问题

热门标签

最新问答