Center bootstrap table with 100% width?

Question

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

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

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.

Possible duplicate of [Center-align a HTML table](https://stackoverflow.com/questions/14073188/center-align-a-html-table) — Chico3001, May 21 '18 at 18:15

Carol Skelly · Accepted Answer · 2021-12-09T13:02:49.393

Use mx-auto w-auto to horizontal center. Also, the table should be inside table-responsive...

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

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

https://codeply.com/go/gotnKXfdw2

Thanks, this is what I was trying to accomplish. – Renari May 21 '18 at 18:21 — Renari, May 21 '18 at 18:21

Behnam Azimi · Answer 2 · 2018-05-21T18:31:49.863

You must put your table inside a div with table-responsive class like below,

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

Update: To center table with not 100% width do like above, and give below style to your .table class.

{
   width:auto;
   margin:0 auto;
}

This makes the table sized fixed to 100% where I wanted it to scale based on content. — Renari, May 21 '18 at 18:21

score 2 · Answer 3 · edited Aug 21 '19 at 12:56

2

hope this works:

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

edited Aug 21 '19 at 12:56

Community

1
1

answered May 21 '18 at 18:33

Nikhil S

3,786
4
18
32

@renari although you can use container fluid for full width. – Nikhil S May 21 '18 at 18:35
@renari if that worked for you,you can mark a tick on it. – Nikhil S May 21 '18 at 18:41

score 0 · Answer 4 · answered Dec 13 '21 at 11:56

Try this code sample one directly from the bootstrap website.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<table class="table text-center">
  <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>

Center bootstrap table with 100% width?

4 Answers4

Linked