css でテーブルのセルの行数指定をしたい

Question

こちらのリンクの様にドラッグで幅が変えられるテーブルがあります。

ここで下記の様に表示される文字が増えたとします。その場合適当な所で折り返して常に2行表示としたいです。

こちらの記事の様にdisplay: -webkit-box;をth,td に対して使おうとするとテーブル自体が崩れてしまいました。どうすればこの表のセルを2行固定で表示してかつこのテーブルの様に幅を可変にできるでしょうか？

ご教授いただけると幸いです。

Answer 1

tdのCSSにword-break: break-all;を付ければ自動で改行されるようにできます(※Safariだとできないかもしれません)。

2行固定ですが、tdの中にdivを作りそのdivに対して参考記事のCSSを付与すればテーブルが崩れずに実現できるかと思います。

Comments

[Hayato1201]

回答ありがとうございました！
ここで質問した内容に関しては解決したのでベストアンサーとさせていただきますが、また別の問題（セルを縮めていった際に他のセルの幅も変わってしまうという点）もあるためこちらに質問をさせていただきました。。。そちらも見ていただけると非常に助かります。。。
https://teratail.com/questions/336347