如何将Bootstrap表格居中并设置100%宽度？

Question

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<table class="table table-striped table-hover table-responsive">
  <thead>
    <th scope="col">column1</th>
    <th scope="col">column2</th>
    <th scope="col">column3</th>
  </thead>
  <tbody>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
  </tbody>
</table>

是否可以在不给表格设置100%以外的宽度的情况下将其居中？我发现大多数实现此功能的答案都会给表格设置小于100%的宽度。这并不好，因为当您将元素居中并且显示足够大时，表格仍然看起来没有居中。

- Renari

---

可能是居中对齐HTML表格的重复问题。 - Chico3001

Answer 1

使用mx-auto w-auto来水平居中。另外，表格应该放在table-responsive内...

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="table-responsive">
    <table class="table table-striped table-hover mx-auto w-auto">
        <thead>
            <tr>
                <th scope="col">column1</th>
                <th scope="col">column2</th>
                <th scope="col">column3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
            <tr>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
            </tr>
        </tbody>
    </table>
</div>

https://codeply.com/go/gotnKXfdw2

- Zim

---

谢谢，这就是我想要达成的。 - Renari

Answer 2

您必须将表格放在带有table-responsive类的

中，如下所示：

<div class="table-responsive">
<table class="table table-striped table-hover">
  <thead>
    <th scope="col">column1</th>
    <th scope="col">column2</th>
    <th scope="col">column3</th>
  </thead>
  <tbody>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
  </tbody>
</table>
</div>

更新： 若要居中表格且宽度不为100%，请仿照上述方法，将以下样式应用于您的 .table 类。

{
   width:auto;
   margin:0 auto;
}

- Behnam Azimi

---

这会使表格的大小固定为100％，而我希望它根据内容进行缩放。 - Renari

Answer 3

希望这能够起作用：

 <div class="container  table-responsive">   
        <table class="table table-striped table-hover ">
            <thead>
              <th scope="col">column1</th>
              <th scope="col">column2</th>
              <th scope="col">column3</th>
            </thead>
            <tbody>
              <tr>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
              </tr>
              <tr>
                <td>item1</td>
                <td>item2</td>
                <td>item3</td>
              </tr>
            </tbody>
        </table>
  </div>

- Nikhil S

---

@renari 虽然你可以使用 container fluid 来实现全宽。 - Nikhil S

@renari 如果这对您有用，您可以在上面打勾。 - Nikhil S

Answer 4

从bootstrap网站直接尝试这个代码示例。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<table class="table text-center">
  <thead>
    <tr>
      <th scope="col">column1</th>
      <th scope="col">column2</th>
      <th scope="col">column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
      <td>item3</td>
    </tr>
  </tbody>
</table>

- Ojas Mahajan