Making a Bootstrap table column fit to content

Question

I m using Bootstrap  and drawing a table  The rightmost column has a button in it  and I want it to drop down to the minimum size it needs to fit said button    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet  gt  x000D   lt table class  table table-responsive  gt  x000D           lt tbody gt  x000D               lt tr gt  x000D                   lt th gt Name lt  th gt  x000D                   lt th gt Payment Method lt  th gt  x000D                   lt th gt  lt  th gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Bart Foo lt  td gt  x000D                   lt td gt Visa lt  td gt  x000D                   lt td gt  lt a role  button  class  btn btn-default btn-xs  href   Payments View NnrN 8tMB0CkVXt06nkrYg  gt View lt  a gt  lt  td gt  x000D               lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D   x000D   x000D    This renders like this     With some firebug highlighting  the column width has come out this wide     That column scales with the page  while the page is in the larger dynamic width modes  I have some idea how I d go about fixing this in pure CSS  but most of those approaches will probably cause issues with the low width versions of the site   How would I make that column drop down to the width of it s contents    As ever - Existing bootstrap classes   pure CSS   Javascript

User · Answer

Kind of an old question  but I arrived here looking for this  I wanted the table to be as small as possible  fitting to it s contents  The solution was to simply set the table width to an arbitrary small number  1px for example   I even created a CSS class to handle it    table-fit       width  1px      And use it like so    lt table class  table table-fit  gt    Example  JSFiddle

User · Answer

Tested on Bootstrap 4 5 and 5 0 None of the solution works for me  The td last column still takes the full width  So here s the solution works  Add table-fit to your table table table-fit       width  auto  important      table-layout  auto  important    table table-fit thead th  table table-fit tfoot th       width  auto  important    table table-fit tbody td  table table-fit tfoot td       width  auto  important     Here s the one for sass uses   mixin width       width  auto  important     table        amp  table-fit            include width          table-layout  auto  important          thead th  tfoot th                 include width                    tbody td  tfoot td                include width

User · Answer

Make a class that will fit table cell width to content   table td fit    table th fit       white-space  nowrap      width  1

User · Answer

x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt h5 gt Left lt  h5 gt  x000D   lt table class  table table-responsive  gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt th gt Action lt  th gt          x000D               lt th gt Name lt  th gt  x000D               lt th gt Payment Method lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td  style  width 1px  white-space nowrap   gt  x000D                   lt a role  button  class  btn btn-default btn-xs  href   Payments View NnrN 8tMB0CkVXt06nkrYg  gt View lt  a gt  x000D                   lt a role  button  class  btn btn-primary btn-xs  href   Payments View NnrN 8tMB0CkVXt06nkrYg  gt Edit lt  a gt  x000D                   lt a role  button  class  btn btn-danger btn-xs  href   Payments View NnrN 8tMB0CkVXt06nkrYg  gt Delete lt  a gt                  x000D               lt  td gt          x000D               lt td gt Bart Foo lt  td gt  x000D               lt td gt Visa lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   lt h5 gt Right lt  h5 gt  x000D   x000D   lt table class  table table-responsive  gt  x000D       lt tbody gt  x000D           lt tr gt                      x000D               lt th gt Name lt  th gt  x000D               lt th gt Payment Method lt  th gt  x000D               lt th gt Action lt  th gt              x000D           lt  tr gt  x000D           lt tr gt  x000D   x000D               lt td gt Bart Foo lt  td gt  x000D               lt td gt Visa lt  td gt  x000D               lt td  style  width 1px  white-space nowrap   gt  x000D                   lt a role  button  class  btn btn-default btn-xs  href   Payments View NnrN 8tMB0CkVXt06nkrYg  gt View lt  a gt  x000D                   lt a role  button  class  btn btn-primary btn-xs  href   Payments View NnrN 8tMB0CkVXt06nkrYg  gt Edit lt  a gt  x000D                   lt a role  button  class  btn btn-danger btn-xs  href   Payments View NnrN 8tMB0CkVXt06nkrYg  gt Delete lt  a gt                  x000D               lt  td gt              x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Add w-auto native bootstrap 4 class to the table element and your table will fit its content

User · Answer

You can wrap your table around the div tag like this as it helped me too    lt div class  col-md-3  gt    lt table gt   lt  table gt    lt  div gt

User · Answer

This solution is not good every time  But i have only two columns and I want second column to take all the remaining space  This worked for me    lt tr gt       lt td class  text-nowrap  gt A lt  td gt       lt td class  w-100  gt B lt  td gt    lt  tr gt

[html] Making a Bootstrap table column fit to content

Examples related to html

Examples related to css

Examples related to twitter-bootstrap