Bootstrap 4 Responsive Tables Won't Take Up 100% Width

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

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:

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>

Bootstrap 4 .table-responsive class won't take 100% width

Found out that it's a issue on Bootstrap V4, you can see in this issue, and my first table is not working, it's just the content of the last line that is long enough to fullfil the table width, so it looks like it works.

EDIT: It got fixed by adding the class table-responsive as a parent div of the table, here is the ship list for the fix and the issue that reported the bug.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <div class="card">
        <div class="card-body">
          <div class="table-responsive">  
            <table class="table table-sm table-hover">
                <thead>
                    <tr>
                        <th>Item 01</th>
                        <th>Item 02</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Item 01</td>
                        <td>Item 02</td>
                    </tr>
                </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap 4 responsive table: How to fix column width and make table always take up 100 % width of parent element?

I now managed to find a solution that suits at least my needs:

<div class="table-responsive">
  <table class="w-auto mw-100">
    ...table elements...
  </table>
</div>

The classes .table-responsive and .w-auto are Bootstrap standard, whereas .mw-100 has been added by me:

.mw-100 {
  min-width:100%;
}

I don't know if this is the "right way" to deal with the issues mentioned in my opening post but at least for me it works fine.

Bootstrap table won't fill container width

It's because you are not following the Bootstrap documentation indications on responsive tables. You have to wrap your table element with .table class in a wrapper <div> with the .table-responsive class, like this:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bootstrap 4 - Responsive Table Mobile, Exact Widths Desktop

When you set the width to auto it overwrites users given widths.
If you want to use their given widths, you should fix table's width on mobile screen.

@media (max-width: 769px) {
    table {
        width: 769px !important;
    }
}

Something like this, you'll be able to have a table with width = 769px on screens that is smaller than 769px. Also, user's given widths can be applied and user should scroll horizontally to see the whole table.

Why do Twitter Bootstrap tables always have 100% width?

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

Bootstrap 4 card too responsive when wrapping table

For anyone interested the answer is to add class clearfix to the wrapping div
as in

<div class="card clearfix">

Now the card is always on the outside of the contents.

Bootstrap 4 Responsive Tables Won't Take Up 100% Width