bootstrap4でtable-responsiveが動作しない

bootstrap4のテーブルで、table-responsiveを使って横スクロールを出したい。
上のテーブルは横スクロールが表示されて期待の動作をするが、下のテーブルは出ません。
なぜこのような差が出るのかがわかりません。

追加のCSSを書かずにどのようにすれば下のテーブルも横スクロールが出るようになるのでしょうか？

<div class="row">
  <!-- これは動作する -->
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <tbody>
        <tr>
          <td>texttexttexttexttexttexttext</td>
          <td>texttexttexttexttexttexttext</td>
          <td>texttexttexttexttexttexttext</td>
          <td>texttexttexttexttexttexttext</td>
          <td>texttexttexttexttexttexttext</td>
        </tr>
        <tr>
          <td>texttexttexttexttexttexttext</td>
          <td>texttexttexttexttexttexttext</td>
          <td>texttexttexttexttexttexttext</td>
          <td>texttexttexttexttexttexttext</td>
          <td>texttexttexttexttexttexttext</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- これは動作しない -->
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark Otto Otto Otto</td>
          <td>Otto Otto Otto Otto</td>
          <td>@mdo Otto Otto Otto</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob Otto Otto Otto Otto Otto Otto</td>
          <td>Thornton Otto Otto Otto Otto Otto Otto</td>
          <td>@fat Otto Otto Otto Otto Otto Otto</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>
            Larry Otto Otto Otto Otto Otto Otto Otto Otto Otto Otto Otto Otto
          </td>
          <td>
            the Bird Otto Otto Otto Otto Otto Otto Otto Otto Otto Otto Otto Otto
          </td>
          <td>
            @twitter Otto Otto Otto Otto Otto Otto Otto Otto Otto Otto Otto Otto
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>