幅がドラッグで可変なテーブルで画面サイズを超えても横幅を広げられる様にするにはどうすれば良いでしょうか？

Question

こちらの様に

ドラッグで幅が可変にできるテーブルがありますが　これを画面サイズを超えてまで広げられる様にするにはどうすれば良いでしょうか？

table にoverflow-x:scroll;などを指定したらいけるかとも思いましたがダメでした、、

この様にマックス伸ばしても画面の幅で止まってしまいます。これをスクロールして画面幅を超えて伸ばせる様にするにはどうすれば良いでしょうか？？

意図としては中身が下記の画像の様に増えた場合にセルの縦に行数が増えない様にしたいからです。

Comments

[K_3578]

>画面サイズを超えてまで広げられる様
これをする意図が不明。

[Hayato1201]

意図は追記しました。

[K_3578]

改行させたくないならwhite-space: nowrap;でいいと思いますけど、
それではみ出した時に云々って話かな？

[Hayato1201]

そうですね、ただwhite-space: nowrapだとそもそもresize: horizontalでサイズ変更できなくなってしまうのと、最終的には改行は2段までにさせたいです、、、

Answer 1

行数の指定、その行数を超えた場合に非表示にする(cssのみ)
意図する物と違うかもしれないけどこの辺とか役に立つかもしれないです。

Comments

[Hayato1201]

ご回答ありがとうございました！
行数に関しては確かにこの様に行数指定できるとありがたいのですが、display: -webkit-box;でやるとテーブルの形が崩れてしまいうまくいきませんでした。。。別途行数指定に関しては質問を載せようと思うのでご回答いただければ幸いです。。。

Answer 2

こんにちは。

以下のようにするとどうでしょうか。

table {
  background-color: black;
  width: max-content;
}

th,
td {
  background-color: lightgray;
  width: max-content;
}

Comments

[Hayato1201]

ご回答ありがとうございました！
こちらで思っていた通りの形となりました！
助かりました。