コンパイラかく語りき

import { Fun } from 'programming'

table-layout: fixed; せずに text-overflow: ellipsis; する

長過ぎる文字列に対して、文末に「…」をつけて省略して表示したい時があります。

これをHTMLのtable要素で実現する方法について書きます。

固定幅テーブル

まず、行が固定幅で良いのなら以下のように書けます。

table {
  table-layout: fixed;
}

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

これで、tdの文字列が長すぎる場合にhogehogehoge... のように表示されます。

でも実務では、行は可変幅のままであって欲しいケースがほとんどだと思います。

可変幅テーブル

可変幅を保ったまま、tdの中身を省略記法にしたい場合は以下のとおりです。

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

  max-width: 0;
}

tdmax-width: 0;を指定します。 これにより可変幅を保ったまま文字列省略ができます。

仕組みについては、こちらをどうぞ。

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

サンプルコード

Codepenにサンプルを置いておきました。良かったらどうぞ。

https://codepen.io/chuck0523/pen/dRgmvB