Question

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％。这不是很好，因为当你将元素居中时，如果显示器足够大，那么表格仍然不会居中。

Answer 1

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

Answer 2

您必须将表格放在table-responsive类的div中，如下所示

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

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

中心自举表100％宽度？

3 个答案: