No.318

固定していない表でも省略（ellipsis）を使いたい！

　表組みで省略を使うなら、基本的には表幅とセル幅を固定しなくてはならない。
　一般的には下記のような指定を行うだろう

table {
  table-layout: fixed;
}
td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

　しかし、世の中ではそううまくいかないことが多い。
　業務系の管理画面では、表組みは画面の大きさに合わせ可変で、その中の一列だけ幅指定無し、という構造はよく見かけるだろう。

　そんなケースで、幅指定無しのセルで省略を使いたい場合は、セルの最大幅に0を指定してあげることでうまくいくようになる。

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

　原理は…調べてみたけどいまいち分からなかった。ちゃんと説明しているページが見つかったら追記しよう。