Why do Twitter Bootstrap tables always have 100% width?

Question

Suppose this markup:

<table class="table table-bordered" align="center">

No mather how many cells I have, the table is always 100% width. Why's that?

because it efficiently uses its parents width; that is how grid system should work! — Vishal, May 21 '12 at 14:40
I would like it to be depent on number of cells, just like ordinary table — kskaradzinski, May 21 '12 at 15:03
For those who searching how to set cell width like div width via span check [this answer](http://stackoverflow.com/a/18498071/1339254) — alexche8, Oct 23 '14 at 07:35

score 243 · Accepted Answer · edited Feb 11 '15 at 13:42

243

All tables within the bootstrap stretch according to their container, which you can easily do by placing your table inside a .span* grid element of your choice. If you wish to remove this property you can create your own table class and simply add it to the table you want to expand with the content within:

.table-nonfluid {
   width: auto !important;
}

You can add this class inside your own stylesheet and simply add it to the container of your table like so:

<table class="table table-nonfluid"> ... </table>

This way your change won't affect the bootstrap stylesheet itself (you might want to have a fluid table somewhere else in your document).

edited Feb 11 '15 at 13:42

Iulian Onofrei

9,188
10
67
113

answered May 21 '12 at 15:52

Andres I Perez

75,075
21
157
138

1

If you place the table inside a span* tag, in order to center the table, would you just include an offset*, too? – HPWD Mar 12 '13 at 17:46
@dlackey Yes, you can offset the table with a class in order to center, you can even add a `.span*` class to your table to give it some width. – Andres I Perez Mar 12 '13 at 20:51
2

At least with bootstrap 3 it only worked for me after adding `!important` to the `width: auto` – geekQ Mar 06 '14 at 16:43
we have to use bootstarp's span class for a table , or we have to manually give a style for .span class, – Jot Dhaliwal Jul 28 '14 at 14:55
1

Warning. Be careful if used in combination with .table-responsive and .table-bordered. The border is applied to the .table-responsive container when below screen width 767px. (bootstrap 3.x) – Stuart Dec 02 '15 at 10:53

score 34 · Answer 2 · answered Aug 14 '18 at 14:08

34

If you're using Bootstrap 4, use .w-auto.

See https://getbootstrap.com/docs/4.1/utilities/sizing/

answered Aug 14 '18 at 14:08

Danko Durbić

7,077
5
34
39

This is the correct answer if you want to keep it to bootstrap and make the table auto-size but not use the column size class within a row. – Harlin Feb 16 '22 at 02:42

score 33 · Answer 3 · edited Nov 03 '16 at 22:51

33

<table style="width: auto;" ... works fine. Tested in Chrome 38 , IE 11 and Firefox 34.

jsfiddle : http://jsfiddle.net/rpaul/taqodr8o/

edited Nov 03 '16 at 22:51

rogerdpack

62,887
36
269
388

answered Jan 12 '15 at 23:30

Razan Paul

13,618
3
69
61

Jess · Answer 4 · 2022-02-16T13:20:21.837

17

Bootstrap 3:

Why fight it? Why not simply control your table width using the bootstrap grid?

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

This will create a table that is half (6 out of 12) of the width of the containing element.

I sometimes use inline styles as per the other answers, but it is discouraged.

Bootstrap 4 and 5:

Bootstrap 4 has some nice helper classes for width like w-25, w-50, w-75, w-100, and w-auto. This will make the table 50% width:

<table class="w-50"></table>

Here's the doc: https://getbootstrap.com/docs/4.0/utilities/sizing/

edited Feb 16 '22 at 13:20

answered Mar 13 '18 at 13:15

Jess

23,901
21
124
145

5

this is by far the simplest solution and should be the accepted answer – Jeff Brown Apr 19 '18 at 19:22
Personally I think the one above it is just as good but you're right, you can't go wrong with this one either way. Still works in BS5. – Harlin Feb 16 '22 at 02:43

DDDD · Answer 5 · 2014-02-20T15:18:13.883

12

I was having the same issue, I made the table fixed and then specified my td width. If you have th you can do those as well.

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

I didn't have any luck with .table-nonfluid.

edited Feb 20 '14 at 15:18

answered Sep 30 '13 at 20:59

DDDD

3,790
5
33
55

1

Try `width: auto !important;` – Leo Apr 15 '14 at 21:25
You can avoid `!important` (it's a [bad practice](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception)). See comment on [an answer below](http://stackoverflow.com/a/24245745/1323144). – Ollie Bennett Oct 15 '14 at 09:10

score 3 · Answer 6 · edited Jul 30 '17 at 15:36

3

I've tried to add style="width: auto !important" and works great for me!

edited Jul 30 '17 at 15:36

Naveen DA

4,148
4
38
57

answered Jun 16 '14 at 14:15

Sergey Dolgopolov

119
1
4

1

If you ensure that your custom CSS appears after the Bootstrap CSS (e.g. your custom styles `` tag appears _below_ the Bootstrap `` tag), then the rules will *cascade* as designed, and you shouldn't need to use your `!important` exception at all. This is true because `width: 100%;` is defined for `table` in the [Bootstrap CSS](https://github.com/twbs/bootstrap/blob/master/less/tables.less) and so is superseding your `width: auto;` rule. – Ollie Bennett Oct 15 '14 at 09:01
Not really an answer, better to edit the current accepted answer which most of the people read _(I edited it now)_. – Iulian Onofrei Feb 11 '15 at 13:29

Why do Twitter Bootstrap tables always have 100% width?

6 Answers6

Bootstrap 3:

Bootstrap 4 and 5:

Linked