Help us understand the problem. What is going on with this article?

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

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

mifumi323
いつも役に立ってくれていたのは、「いいね」の数が0や1の記事だった。
https://tgws.plus/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした