8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTMLのtableの列幅をドラッグで変えられるようにする雑な方法

Last updated at Posted at 2020-02-29

表計算ソフトみたいに、テーブルの列幅をユーザー側で変えたいことって、ありますよね?
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とかでがっつり制御しなくちゃいけないとは思いますが、それについては説明しません。
だって、ここは雑な方法についての記事だし、そもそもちゃんとしたやり方知らないからね!

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?