【Bootstrap】テーブルに横スクロールがつかない時

とろ

Bootstarpではテーブルの外枠divtable-responsiveを付けるだけで
レスポンシブ対応 (=横スクロール) ができる便利機能がある

しかし付けても付けても横スクロールにならずに窮屈そうなテーブルが出来上がってしまう問題があったのでメモしとく

基本的に下記コードで動作する

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

けど今回モーダルの中で使用した場合だとテーブル内の文字が自動改行されて
横スクロールが出てこない・・

解決法

  • text-nowrapクラスをtableタグに追加して明示的に文字を改行させる設定をしたら解決
<div class="modal-body">
  <div class="table-responsive">
    <table class="table text-nowrap">
      ...
    </table>
  </div>
</div>

\ 案件のご依頼・ご相談はこちらから /