Bootstrap 4 responsive tables won t take up 100 width

Question

I am building a web app using Bootstrap 4 and running into some weird issues   I want to utilize Bootstrap s table-responsive class to allow horizontal scrolling of the tables on mobile devices    On desktop devices the table should take up 100  of the containing DIV s width   As soon as I apply the  table-responsive class to my table  the table shrinks horizontally and no longer takes up 100  of the width    Any ideas     Here is my markup    lt  DOCTYPE html gt   lt html lang  en  class  mdl-js  gt   lt head gt       lt title gt  lt  title gt       lt meta charset  utf-8  gt       lt meta name  apple-mobile-web-app-capable  content  yes  gt       lt meta name  viewport  content  width device-width  initial-scale 1  shrink-to-fit no  gt       lt meta name  application-name  content    gt       lt meta name  theme-color  content   000000  gt       lt link rel  stylesheet  href   css bundle min css  gt   lt  head gt   lt body gt       lt div class  container-fluid no-padding  gt            lt div class  row  gt               lt div class  col-md-12  gt                   lt table class  table table-responsive  id  Queue  gt                       lt thead gt                           lt tr gt                               lt th gt  lt span span  sr-only  gt Priority lt  span gt  lt  th gt                               lt th gt Origin lt  th gt                               lt th gt Destination lt  th gt                               lt th gt Mode lt  th gt                               lt th gt Date lt  th gt                               lt th gt  lt span span  sr-only  gt Action lt  span gt  lt  th gt                            lt  tr gt                         lt  thead gt                         lt tbody gt                             lt tr class  trip-container  id  row-6681470c-91ce-eb96-c9be-8e89ca941e9d  data-id  6681470c-91ce-eb96-c9be-8e89ca941e9d  gt                                 lt td gt 0 lt  td gt                                 lt td gt PHOENIX  AZ lt  td gt                                 lt td gt SAN DIEGO  CA lt  td gt                                 lt td gt DRIVING lt  td gt                                 lt td gt  lt time datetime  2017-01-15T13 59  gt 2017-01-15 13 59 00 lt  time gt  lt  td gt                                 lt td gt  lt span class  trip-status-toggle fa fa-stop  data-id  6681470c-91ce-eb96-c9be-8e89ca941e9d  data-trip-status  1  gt  lt  span gt  lt  td gt                             lt  tr gt                             lt tr class  steps-container  data-steps-for  6681470c-91ce-eb96-c9be-8e89ca941e9d  style  display  none   gt                                 lt td colspan  6  class  no-padding  gt  lt  td gt                             lt  tr gt                         lt  tbody gt                     lt  table gt                 lt  div gt              lt  div gt              lt br gt           lt  div gt           lt script type  text javascript  src    ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt           lt script type  text javascript  src   js bundle min js  gt  lt  script gt        lt  body gt   lt  html gt    If I apply a 100  width to the  table-responsive class  it makes the table itself a 100  wide but the child elements  TBODY  TR  etc   are still narrow

User · Answer

For some reason the responsive table in particular doesn't behave as it should. You can patch it by getting rid of display:block;

.table-responsive {
    display: table;
}

I may file a bug report.

Edit:

It is an existing bug.

User · Answer

None of these answers are working  date today 9th Dec 2018   The correct resolution here is to add  table-responsive-sm to your table    lt table class  table table-responsive-sm  gt   Your table   lt  table gt    This applies the responsiveness aspect only to the SM view  mobile   So in mobile view you get the scrolling as desired and in larger views the table is not responsive and thus displayed full width  as desired   Docs  https   getbootstrap com docs 4 0 content tables  breakpoint-specific

User · Answer

I found that using the recommended table-responsive class in a wrapper still causes responsive tables to  surprisingly  shrink horizontally    lt div class  table-responsive-lg  gt       lt table class  table  gt                   lt  table gt   lt  div gt    The solution for me was to create the following media breakpoints and classes to prevent it    table-xs       width 544px      table-sm       width  576px      table-md       width  768px      table-lg       width  992px      table-xl       width  1200px        Small devices  landscape phones  544px and up      media  min-width  576px           table-sm           width  100               Medium devices  tablets  768px and up  The navbar toggle appears at this breakpoint     media  min-width  768px         table-sm           width  100               table-md           width  100               Large devices  desktops  992px and up      media  min-width  992px         table-sm           width  100               table-md           width  100               table-lg           width  100               Extra large devices  large desktops  1200px and up      media  min-width  1200px         table-sm           width  100               table-md           width  100               table-lg           width  100               table-xl           width  100             Then I can add the appropriate class to my table element  For example    lt div class  table-responsive-lg  gt       lt table class  table table-lg  gt                   lt  table gt   lt  div gt    Here the wrapper sets the width to 100  for large and greater per Bootstrap  With the table-lg class applied to the table element  the table width is set also set to 100  for large and greater  but set to 992px for medium and smaller  The classes table-xs  table-sm  table-md  and table-xl work the same way

User · Answer

It seems as though the  quot sr-only quot  element and its styles inside of the table are what s causing this bug  At least I had the same issue and after months of banging our head against the wall that s what we determined the cause was  though I still don t understand why  Adding left 0 to the  quot sr-only quot  styles fixed it

User · Answer

Create responsive tables by wrapping any  table with    table-responsive -sm -md -lg -xl   making the table scroll   horizontally at each max-width breakpoint of up to  but not including    576px  768px  992px  and 1120px  respectively    just wrap table with  table-responsive -sm -md -lg -xl   for example    lt div class  table-responsive-md  gt       lt table class  table  gt       lt  table gt   lt  div gt    bootstrap 4 tables

User · Answer

That s because the  table-responsive class adds the property display  block to your element which changes it from the previous display  table   Override this property back to display  table in your own stylesheet    table-responsive       display  table      Note  make sure this style executes after your bootstrap code for it to override

User · Answer

It s caused by the table-responsive class giving the table a property of display block  which is strange because this overwrites the table classes original display table and is why the table shrinks when you add table-responsive    Most likely its down to bootstrap 4 still being in dev  You are safe to overwrite this property with your own class that sets display table and it won t effect the responsiveness of the table   e g    table-responsive-fix     display table

User · Answer

For Bootstrap 4 x use display utilities   w-100 d-print-block d-print-table  Usage    lt table class  table w-100 d-print-block d-print-table  gt

User · Answer

The solution compliant with the v4 of the framework is to set the proper breakpoint  Rather than using  table-responsive  you should be able to use  table-responsive-sm  to be just responsive on small devices   You can use any of the available endpoints  table-responsive -sm -md -lg -xl

User · Answer

Taking in consideration the other answers I would do something like this  thanks    table-responsive        include media-breakpoint-up md            display  table

User · Answer

If you re using V4 1  and according to their docs  don t assign  table-responsive directly to the table  The table should be  table and if you want it to be horizontally scrollable  responsive  add it inside a  table-responsive container  a  lt div gt   for instance       Responsive tables allow tables to be scrolled horizontally with ease  Make any table responsive across all viewports by wrapping a  table with  table-responsive     lt div class  table-responsive  gt     lt table class  table  gt           lt  table gt   lt  div gt    doing that  no extra css is needed   In the OP s code   table-responsive can be used alongside with the  col-md-12 on the outside

User · Answer

The following WON T WORK  It causes another issue  It will now do the 100  width but it won t be responsive on smaller devices    table-responsive       display  table      All these answers introduced another problem by recommending display  table   The only solution as of right now is to use it as a wrapper    lt div class  table-responsive  gt     lt table class  table  gt        lt  table gt   lt  div gt

User · Answer

This solution worked for me   just add another class into your table element  w-100 d-block d-md-table  so it would be    lt table class  table table-responsive w-100 d-block d-md-table  gt   for bootstrap 4 w-100 set the width to 100  d-block  display  block  and d-md-table  display  table on min-width  576px   Bootstrap 4 display docs

[css] Bootstrap 4 responsive tables won't take up 100% width

Examples related to css

Examples related to bootstrap-4