Centering table on a page on bootstrap

Question

I am trying to center a table using bootstrap.

Here is the 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>

However, no matter how I adjust the css, the table is still aligned to the left. I'm sure I am missing something simple. I also thought container-fluid would make the table span across the whole page.

here is the css:

.table th {
    text-align: center;
}

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

Do you mean the contents of each of the cell of the table should align center? — hkasera, Dec 14 '15 at 15:54
how about wrapping the table in a `div` with the class `textcentered` ? — , Dec 14 '15 at 15:55
Normally yes the 'container fluid' will do that but your table must also have his width to be set to 100% . You can wrap it in a div and style this with 'margin: 0 auto' — Franco, Dec 14 '15 at 15:59
This way works without changing the size of your table & regardless of screen size: https://stackoverflow.com/a/54270709/10415078 — Kat, Jan 19 '19 at 19:39

score 31 · Accepted Answer · edited Sep 19 '16 at 12:17

31

You're missing the margin:auto

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

Example

edited Sep 19 '16 at 12:17

Draken

3,134
13
34
54

answered Dec 14 '15 at 15:57

Antonio Smoljan

2,187
1
12
11

My problem was that I had a lot of divs around the table – Luigi Lopez Apr 07 '18 at 08:18
This way works without changing the size of your table & regardless of screen size: https://stackoverflow.com/a/54270709/10415078 – Kat Jan 19 '19 at 19:39

score 6 · Answer 2 · answered Dec 14 '15 at 15:56

6

Change your CSS to:

table{
   margin: 0 auto
}

answered Dec 14 '15 at 15:56

patrick

11,519
8
71
80

Centering table on a page on bootstrap

2 Answers2