相关疑难解决方法(0)

我试图使用bootstrap中心表.

这是html:

<div class="container-fluid">
    <table id="total votes" class="table table-hover text-centered">
        <thead>
            <tr>
                <th>Total votes</th>
                <th> = </th>
                <th>Voter A</th>
                <th> + </th>
                <th>Voter B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ total_votes }}</td>
                <td> = </td>
                <td>{{ total_voter_a }}</td>
                <td> + </td>
                <td>{{ total_voter_b }}</td>
            </tr>
        </tbody>    
    </table>
</div>

但是,无论我如何调整css,桌子仍然与左边对齐.我确定我错过了一些简单的事情.我还以为container-fluid会让这个表跨越整个页面.

这是css:

.table th {
    text-align: center;
}

.table {
    border-radius: 5px;
    width: 50%;
    float: none;
}

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%。这不是很好，因为如果显示足够大，那么当您将元素居中时，表格似乎仍然没有居中。