::-webkit-scrollbar の使用は避けた方がいいのでしょうか。

html
1例）
2<table>
3  <tr>
4    <td class="title"><%= @book.title %></td>
5    <td></td>
6  </tr>
7  <tr>
8    <td></td>
9※以下省略

css
1.title {
2    overflow-x: scroll;
3    overflow: hidden;
4    white-space: nowrap;
5※以下省略
6
7.title::-webkit-scrollbar{
8    display: none;
9}
10

横幅を指定してあるテーブルに（@book.title）を持ってきたとき、文字列が長すぎて2行になってしまうことがあります。テーブルのデザインを保つために1行に収めたいのですが、

text-overflow: ellipsis;

ではなく、あくまで全体を表示したいので

overflow-x: scroll;

にしました。
ですが、この場合ブラウザによっては(？)スクロールバーが常時表示されてしまいデザイン性が損なわれます。なので、

::-webkit-scrollbar { display: none; }

を使ってスクロールバーを消そうと思うのですが、-webkit-が効かないケースも多く、使うべきか(そもそもoverflow-x: scroll;を使うべきか)判断しかねています。

Can I use... (https://caniuse.com/) で　::-webkit-scrollbar　の使用可能率を調べると、世界で86.57%と出るのですが(今現在)、裏を返せば約15%の利用者にはスクロールバーが見えてしまう(テーブルデザインが崩れる)ということですよね。（私のサイトの想定利用者は日本人のみですが…）

どう判断すべきでしょうか。有識者の意見を伺いたいです。
また、overflow-x: scroll; の代わりとなるものがあったらぜひ教えていただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

はみ出る時にだけスクロールバーを表示する、ということであれば、挙動についてはユーザーエージェント次第ではありますが、
overflow-x:auto;
を設定してはいかがでしょうか。
参考サイト　https://developer.mozilla.org/ja/docs/Web/CSS/overflow-x