以前、【CSS】幅を超えた文字列を省略表示する方法で紹介したものの発展版です。
tableタグ内でoverflowを適用するには、もう少し手を加える必要があります。
tdタグにそのままoverflowを適用しても
文字列の幅分だけ取られてしまいます。
そこで、divタグにoverflowを適用し、
tableタグにtable-layout:fixedを設定することで実装が可能になります。
実行例は下記の通りです。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”GqbEoJ” default_tab=”html,result” user=”miko3″]See the Pen cssoffix by miko3 (@miko3) on CodePen.[/codepen_embed]意外と難しい…(:3_ヽ)_