CODEWITHSUNDEEP
twitter-bootstrap
kskaradzinski
kskaradzinski

Reputation: 5084

Why do Twitter Bootstrap tables always have 100% width?

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?

Upvotes: 160

Views: 155327

Answers (6)

Jess
Jess

Reputation: 25079

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/

Upvotes: 17

Danko Durbić
Danko Durbić

Reputation: 7237

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

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

Upvotes: 37

Sergey Dolgopolov
Sergey Dolgopolov

Reputation: 119

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

Upvotes: 3

Razan Paul
Razan Paul

Reputation: 13838

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

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

Upvotes: 32

Andres I Perez
Andres I Perez

Reputation: 75379

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

Upvotes: 244

DDDD
DDDD

Reputation: 3940

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.

Upvotes: 12

Related Questions