長過ぎる文字列に対して、文末に「…」をつけて省略して表示したい時があります。
これを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; }
td
へmax-width: 0;
を指定します。
これにより可変幅を保ったまま文字列省略ができます。
仕組みについては、こちらをどうぞ。
Why does this behave the way it does with max-width: 0?
サンプルコード
Codepenにサンプルを置いておきました。良かったらどうぞ。