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; o
