Here is the solution that worked for me:

To make it work, simply include an additional class in your table element: w-100 d-block d-md-table

So your code should look like this:

<table class="table table-responsive w-100 d-block d-md-table">

With Bootstrap 4, the w-100 class sets the width to 100%, d-block changes the display to block, and d-md-table will display the table on screens with a minimum width of 576px.

Check out the Bootstrap 4 display documentation

If you happen to be using V4.1, remember not to directly assign the .table-responsive class to your table as per the documentation. Your table should have the .table class and if you want it to scroll horizontally (making it responsive), place it within a .table-responsive container (such as a <div>).

Responsive tables make horizontal scrolling simple. Ensure your table is responsive on all screen sizes by wrapping it with .table-responsive.

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

No extra CSS is required when following this approach.

In the provided OP's code, you can use .table-responsive in conjunction with .col-md-12 outside of it.

It seems that none of the current solutions are effective (today's date is 9th Dec 2018). To properly resolve this issue, you should consider adding .table-responsive-sm to your table:

<table class='table table-responsive-sm'>
[Add your table content here]
</table>

By applying this class, your table will only be responsive on small mobile screens. This means that on mobile devices, users will see a scrollable table while on larger screens, the table will display at full width as intended.

For more information, refer to the documentation: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

To make tables responsive, simply enclose any .table with the .table-responsive{-sm|-md|-lg|-xl} class. This will enable horizontal scrolling for the table at specific max-width breakpoints of 576px, 768px, 992px, and 1120px (excluding).

Just wrap your table with .table-responsive{-sm|-md|-lg|-xl}

For instance:

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

Check out Bootstrap 4 Tables

There seems to be an issue with the responsive table not functioning correctly. One possible solution is to remove the display:block; property.

.table-responsive {
    display: table;
}

I am considering submitting a bug report for this issue.

Edit:

Upon further investigation, it appears that this is already a known bug.

To ensure compatibility with version 4 of the framework, it is recommended to adjust the breakpoint accordingly. Instead of employing .table-responsive, consider utilizing .table-responsive-sm for responsiveness exclusively on small devices.

Choose from a variety of endpoints: table-responsive{-sm|-md|-lg|-xl}

This happens because the .table-responsive class changes the display property of your element to block, from its previous state of table.

To revert this change, you can override the property in your own stylesheet:

.table-responsive {
    display: table;
}

Note: Ensure that this style is applied after your bootstrap code to take effect.

The reason for this issue is the use of the class table-responsive, which changes the table's display property to block. This causes a conflict with the original display:table property of the table, resulting in the table shrinking when the table-responsive class is added.

It is likely due to bootstrap 4 still being in development. To resolve this issue, you can create your own class that sets the display property to table without affecting the responsiveness of the table.

For example:

.table-responsive-fix{
   display:table;
}

After reviewing the responses, I have come up with a solution that looks like this. Appreciate the input!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}

After experimenting with the recommended table-responsive class within a wrapper, I was surprised to find that it caused responsive tables to shrink horizontally:

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

To overcome this issue, I decided to establish specific media breakpoints and classes in order to maintain the appropriate table sizes:

.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%;
    }
}

By applying the appropriate class to my table element, like so:

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

The wrapper ensures the width is set to 100% for larger screens following Bootstrap's guidelines. When the table-lg class is assigned to the table element, the width remains at 100% for larger screens but reverts to 992px for medium and smaller screens. The classes table-xs, table-sm, table-md, and table-xl function similarly.

One potential solution to make a table responsive is by wrapping it in a div and applying the .responsive-table class to both elements:

div.table-responsive {
    display: block;
    overflow: scroll;
}

table.table-responsive {
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    table-layout: fixed;
    width: 100%;
    display: table;
}

By implementing this method, you create a surrounding div that expands to 100% with the column widths, while allowing the table itself to be scrollable. This approach is particularly useful when dealing with side columns on a webpage, as other solutions may not account for varying width requirements.

To make use of display utilities in Bootstrap 4.x, you can utilize the following classes:

w-100 d-print-block d-print-table

How to Use:

<table class="table w-100 d-print-block d-print-table">

The bug appears to be originating from the "sr-only" element and its styles within the table. I encountered a similar issue, and after extensive troubleshooting, we discovered that this was the root cause, although the reason behind it remains unclear to me. Adding left:0 to the "sr-only" styles resolved the problem.