代码之家 › 专栏 › 技术社区 › Renari

100%宽度的中央引导表?

bootstrap-4 css

Renari · 技术社区 · 7 年前

<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%。这不是很好,因为当您将元素居中时,如果显示足够大,则表仍然显示为未居中。

3 回复 | 直到 7 年前

Carol Skelly 7 年前

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

Behnam Azimi 7 年前

你必须把你的桌子放在 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;
}

Nikhil 7 年前

希望这能奏效:

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

推荐文章