Bootstrap4で、table-responsiveで横スクロールが出ないのに対処

2019年03月06日

Bootstrap4で、横長のtableにtable-responsiveクラスを適用して、はみ出させずに横スクロールさせようと思っていたのですが、何故かtable-responsiveを適用してもtableが横に飛び出したままで横スクロールが出現しませんでした。

書いていたコードは以下のような内容です。

-----

これで行けるはずなのですが・・・・

そしていろいろ試してみたのですが、原因がわかりました。

　←　親要素のこれが原因


-----

原因としては、div class=”table-responsive”の親要素に、class=”row”が入っていました。

これを削除することで動作するようになりました。

修正後

　←　class="row"を削除


-----