0

幅の異なる列を持つテーブルを表示したいと考えています。テーブルの各列でオーバーフロー テキストを非表示にしたい。私は多くのことを試しましたが、望ましい出力が得られないようです。

例えばこんなものが欲しい。

|-Row 1-|-----------Row 2------------|---------Row 3 ----------|---Row 4 ---|
|Hello..|Here is some longer text t..|You get the idea         | Blah Bla...|

私はCSSで次のことを試しました...

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

.ex_table .cell_1 { width:10%; }
.ex_table .cell_2 { width:40%; }
.ex_table .cell_3 { width:30%; }
.ex_table .cell_4 { width:20%; }

しかし、幅は無視され (おそらく固定幅のため?)、テーブルはすべての列が同じ幅で表示されます。

問題が解決しました

上記の解決策は実際に機能しますが、テーブルにテーブル ヘッダーがありました。セルではなくヘッダーの幅を設定する必要があります!

4

2 に答える 2

0

多分あなたは固定高さを追加する必要がありますか？.ex_table tr td{ 高さ: 20px; オーバーフロー:非表示; テキストオーバーフロー: 省略記号; 空白:nowrap; }

于 2013-07-11T21:58:07.057 に答える
0

テーブル CSS に幅を追加します... 基本的に、セル幅をパーセンテージnothingまたはauto問題の原因となっているパーセンテージに設定しています。テーブルの CSS に幅を追加することで、セルの幅にサイズの明確な定義を提供します。

.ex_table { table-layout:fixed; width: 100%;}
.ex_table tr td { 
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
    border: 1px solid #aaa;}

.ex_table .cell_1 { width:10%; }
.ex_table .cell_2 { width:40%; }
.ex_table .cell_3 { width:30%; }
.ex_table .cell_4 { width:20%; }

jsFiddle デモ(Chrome でのみテスト済み)

于 2013-07-11T22:03:13.537 に答える