table内での三点リーダー（...）の表示を調べたら、意外と深かった話

はじめに

収まりきらない文字を1行に収めたいとき、次のようにして三点リーダー（…）で省略することはよくありますが、table内ではやったことがなかったので調べました。

div {
  text-overflow: ellipsis; // ...を表示する
  white-space: nowrap; // 改行させない
  overflow: hidden; // 溢れた文字を隠す
}

調べた結果、table内で3点リーダーを出すには、max-width: 0;を足すだけで良いらしいです。

td, th {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0; // 追加
}

理由

なんで、max-width: 0;を足すだけでいいのか、ということになりますが、それはtableタグがwidth指定を無視することに関係するようです。

max-width:0は、要素の幅を0にしようとするもの、つまり、中身全てがoverflowになるはずです。
しかし、tdにはデフォルトで

display: table-cell

がかかっているので、コンテンツがはみ出ていない通常時はmax-width:0なしで表示されます。

コンテンツがはみ出るくらいtdの幅が縮むと、max-width:0によって幅がテキストコンテンツの幅よりも小さくなり、収まりきらなくなったテキストはtdのoverflowになります。
tdがテキストのoverflowを持っている状態で、text-overflow: ellipsisが設定されると、三点リーダー（...）が表示される、という仕組みです。

参考

Why does this behave the way it does with max-width: 0?