table-responsive class does not take full width

This was previously reported in #24256, which was closed after #24438 was merged. However, that merge was only documentation, and the issue doesn’t actually appear to be fixed in Beta 2.

A table with the table-responsive class will not render at full width. I’m not sure why it works in the example in the docs, but this codepen demonstrates that the issue still persists.

<table class="table table-responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Developer</td>
      <td>None</td>
    </tr>
  </tbody>
</table>

The issue occurs on both Firefox 58 and Chrome 62.

[browner12]

simple solution, use a wrapping <div> with the table-responsive class.

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

[tmorehouse]

In the documentation examples, the reason it appears to “work” is that there is enough content in the table to force it to full width inside the container. Remove a few columns in the example table and you will see that it doesn’t span full width.