css - テーブル セルの CSS パーセンテージ幅とテキスト オーバーフロー

Question

text-overflow: ellipsisセルの幅がパーセンテージになっているテーブルがあり、長いテキスト行を非表示にするために使用したい:

http://jsfiddle.net/Fm5bM/

この例では、省略記号は div では正常に機能しますが、セルでは機能しません。それはまだ大きくなり、 と の両方を無視しwidth:60%ますmax-width:60%。

セルにa を追加するdisplay:blockと、テキストは 60% で停止し、省略記号が表示されますが、セルの合計幅はテキスト全体のサイズのままです。

http://jsfiddle.net/Fm5bM/3/

最終的には、テーブルを画面に合わせたいと思います。純粋なcssでそれを行う方法はありますか?

Answer 1

これは を使用して簡単に実行できますtable-layout: fixedが、この CSS プロパティについて知っている人は多くないため、「少しトリッキー」です。

table {
  width: 100%;
  table-layout: fixed;
}

ここで更新されたフィドルで実際に動作していることを確認してください: http://jsfiddle.net/Fm5bM/4/