Bootstrap4のtable-responsiveが効かない原因と対策

Bootstrap 4でtable-responsiveが効かなくなったのはなぜ？

かなりニッチな記事だと思いますが、Bootstrap 3を使っていた人がBootstrap
4に移行した時にtable-responsiveが効かなくなった方向けの記事です。

2時間近くハマったので他の人が同じ轍を踏まないように共有します。

原因：white-space:nowrapの指定が無くなったから

Bootstrap 3の.table-responsiveの時にはこんなcss記述がありました。

@media screen and (max-width: 767px)
.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tbody>tr>th,
.table-responsive>.table>tfoot>tr>td,
.table-responsive>.table>tfoot>tr>th,
.table-responsive>.table>thead>tr>td,
.table-responsive>.table>thead>tr>th {
white-space: nowrap;
}

white-space: nowrap;は改行をしなくするための記述です。
この記述がBootstrap 4では無いので、日本語は自動的に改行されてしまうのです。
そのため、tableの幅が.table-responsiveに収まってしまい、レスポンシブ表示がされないのです。

英語の場合は単語単位では改行されないため、満足な幅がでるようです。

対策：thにだけwhite-spaceを指定する

これだけ。

.table-responsive th {
white-space: nowrap;
}

tdは自動で改行されるので、tdの幅を調節したい場合は、thの要素内にスペースを追加してあげれば調節できます。
調節方法は個人的には気持ち悪いけど、いろいろやった結果一番最適解な気がする。
他の対策方法としてはtable要素にtable-layout:
fixedをかけてtdにインラインでwidthを指定する方法もあるけど、インラインstyle指定はできれば使いたくないので、スペースが一番良いように思います。

ついでにUIの改善も

.table-responsiveはスマホで見るとパッと見スクロールできるかがわからないので、良く以下の記述を追加してます。

@media screen and (max-width: 575px) { //スマホだけ適用
/* 枠線を表示する /
.table-responsive {
border: 1px solid #eee;
}
/ スクロールできることを明示する /
.table-responsive::before {
font-size: 12px;
display: block;
padding: 5px 5px 5px 15px;
content: ‘表は左右にスクロールできます’;
color: #999;
}
/ iPhoneのtable-responsiveの時にスクロールバーを表示する */
.table-responsive::-webkit-scrollbar {
height: 5px;
}

.table-responsive::-webkit-scrollbar-track {
border-radius: 5px;
background: #eee;
}

.table-responsive::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #666;
}
}