tableの中のテキストをスクロールバーなしでスクロールする方法(マウスでドラッグするとすべてのテキストが見える)

tableで文字があふれるのをなんとかしたい

tableで想定しているサイズから文字があふれる場合、

overflow: scroll;
overflow: hidden;
overflow: scroll;

による対処だったり、white-space: nowrap;を指定せずに改行させる対処法だったりがあるかと思います。

それらの対処法以外でサイズ内に収めつつ、テキストをドラッグすることにより表示可能とする方法です。
↓のResultでテキストが切れている箇所を右にドラッグしてください。テキストがカットされておらず、すべて表示&選択可能です。

See the Pen Untitled by Shirai (@taole33) on CodePen.

なにをやっているか

結果だけ得たい方は↑のhtmlとcssをパクってコピれば大丈夫と思います。
が、それぞれの記述でなにをやってるか知りたい方はこのまま読み進めてください。
やっていることは「スクロールバーなしでスクロールする」です

table下のtdにcssを適用しています。

.scroll-but-notscrollbar td {
    overflow: scroll;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

↓改行ナシとしています

white-space: nowrap;

↓スクロールあり。このままだとスクロールバーが表示されてしまう。

overflow: scroll;

↓スクロールバーを消しています。ブラウザによりスクロールバーを消す方法が違うので、ブラウザ毎に記述が必要です。

  -ms-overflow-style: none; /* IE対応 */
   scrollbar-width: none; /* Firefox 対応 */


  .scroll-but-notscrollbar td::-webkit-scrollbar {
    display: none;　/* Chrome, Safari,Edge対応 */
  }