100% 宽度的中心引导表?

Ren*_*ari 3 css bootstrap-4

https://jsfiddle.net/t4ura97t/

<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>
Run Code Online (Sandbox Code Playgroud)

是否可以在不为表格提供 100% 以外的宽度的情况下将表格居中?我为此找到的大多数答案都使表格的宽度小于 100%。这不是很好,因为如果显示足够大,那么当您将元素居中时,表格似乎仍然没有居中。

Zim*_*Zim 10

使用mx-auto w-auto到水平中心。另外,桌子应该在里面table-responsive......

https://www.codeply.com/go/gotnKXfdw2

<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>
Run Code Online (Sandbox Code Playgroud)

  • 谢谢,这就是我试图完成的。 (2认同)