Why do Twitter Bootstrap tables always have 100 width

Question

Suppose this markup    lt table class  table table-bordered  align  center  gt     No mather how many cells I have  the table is always 100  width  Why s that

User · Answer

If you re using Bootstrap 4  use  w-auto    See https   getbootstrap com docs 4 1 utilities sizing

User · Answer

I ve tried to add style  width  auto  important  and works great for me

User · Answer

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    lt style gt  table   table-layout  fixed  word-wrap  break-word     lt  style gt    lt td width  10    td gt    I didn t have any luck with  table-nonfluid

User · Answer

lt table style  width  auto       works fine  Tested in Chrome 38   IE 11 and Firefox 34   jsfiddle   http   jsfiddle net rpaul taqodr8o

User · Answer

Bootstrap 3  Why fight it   Why not simply control your table width using the bootstrap grid   lt div class  quot row quot  gt       lt div class  quot col-sm-6 quot  gt           lt table gt  lt  table gt       lt  div gt   lt  div gt   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  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   lt table class  quot w-50 quot  gt  lt  table gt   Here s the doc  https   getbootstrap com docs 4 0 utilities sizing

User · Answer

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    lt table class  table table-nonfluid  gt       lt  table gt    This way your change won t affect the bootstrap stylesheet itself  you might want to have a fluid table somewhere else in your document

[twitter-bootstrap] Why do Twitter Bootstrap tables always have 100% width?

Examples related to twitter-bootstrap