【CSS】幅を超えた文字列を省略表示する方法(Table対応)

以前、【CSS】幅を超えた文字列を省略表示する方法で紹介したものの発展版です。
tableタグ内でoverflowを適用するには、もう少し手を加える必要があります。

tdタグにそのままoverflowを適用しても
文字列の幅分だけ取られてしまいます。

そこで、divタグにoverflowを適用し、
tableタグにtable-layout:fixedを設定することで実装が可能になります。

実行例は下記の通りです。

See the Pen cssoffix by miko3 (@miko3) on CodePen.0

意外と難しい…(:3_ヽ)_

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください