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>