CSS：tableのセル内文字が長くなったときに省略をする方法

テキストを1行に収めたいとき、収まりきらない文字を三点リーダー（…）で省略することがあると思います。次のようなCSSです。

div {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

この例のように div 等の要素だったらこれで良いのですが、テーブルセル内ではもうひとつプロパティを追加する必要があります。

max-widthをつけると効く

max-widthをつけると文字が省略できるようになります。

td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
}

ただし、stack overflowにあるhtml - Why does this behave the way it does with max-width: 0? - Stack Overflowを読むと、ややハック感がある技なのかなと思いました。利用の際には見た目が壊れないか注意深く検証をおこなう必要がありそうです。