表計算ソフトみたいに、テーブルの列幅をユーザー側で変えたいことって、ありますよね?
CSSのresizeプロパティとoverflowプロパティを使って、テーブルの列幅を可変にできます。
See the Pen HTMLのtableの列幅をドラッグで変えられるようにする雑な方法 by 松田美文 (@mifumi323) on CodePen.
resize: horizontal
とすることで、横方向にリサイズできるようになります。
そのとき、overflow: visible
になっていると、resizeが効かないので、overflow: hidden
にしておきます。
ただし、残念ながら、「雑な方法」なので、どこでもちゃんと動くわけじゃないんですね。
Google Chrome、Mozilla Firefox、Microsoft Edge、Microsoft Internet Explorer(いずれも2020年2月時点の最新版)で試してみましたが、リサイズできたのはGoogle Chromeだけでした。
実はChromeでも、テーブルの中身や他のスタイル次第では変な動きになったりするので、完全に期待通りな、表計算ソフトみたいな挙動にはなりません(Qiitaの画面でも、テーブル全体が幅いっぱいになったとき、微妙な動きになると思います)。
ちゃんと動くものを作るには、JavaScriptとかでがっつり制御しなくちゃいけないとは思いますが、それについては説明しません。
だって、ここは雑な方法についての記事だし、そもそもちゃんとしたやり方知らないからね!