中心引导表的宽度为100％? [英] Center bootstrap table with 100% width?

问题描述

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>

是否可以在不使表格宽度为100％的情况下使表格居中?我为此找到的大多数答案都使表格的宽度小于100％.这不是很好，因为当您将元素居中时，如果显示足够大，表格似乎仍未居中.

Is it possible to center this table without giving the table a width other than 100%? Most of the answers I've found for doing this all give the table a width less than 100%. This isn't very nice since when you then center the element if the display is big enough the table still appears to not be centered.

推荐答案

使用mx-auto w-auto来水平居中.此外，表格应位于table-responsive ...

Use mx-auto w-auto to horizontal center. Also, the table should be inside 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>

这篇关于中心引导表的宽度为100％?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！