html - テーブル行のオーバーフローを非表示にする方法 (テイク 2)

Question

テーブルのすべての行が高さを固定していることを確認する必要があります。これは、セルに改行が埋め込まれたコンテンツや、セルが拡大されるその他の特性が含まれている場合でも同様です。

基本的には設定したいだけですtd { height: 1.2em; overflow: hidden; }が、まだ謎の理由でうまくいきません。

私が試したこと：

table { table-layout:fixed; }表の行のオーバーフローを非表示にする方法から。
table { display: block; }広くするだけです。
td { white-space: nowrap; }埋め込みには影響しません<br />。
td { line-height: 0; }行の高さを減らしましたが、テキスト行が互いに重なり合って読みにくくなりました ( CSS での表の行の高さの設定から)
tr { height: 1em; }とtd { height: 1em; }組み合わせても違いはありません（TRの高さを修正する方法から）
td { text-overflow: ellipsis; }違いはありませんでした
table { height: 1em; }違いはありません（cssから：行の高さを修正）
CSSのような Javascript ハックは使いたくない: 表のセルを切り捨てますが、できるだけ収まるようにします

機能しているように見えるのはだけですがtd { display: block; }、私が知る限り、ブラウザはテーブル内のテーブルセルではないものをレンダリングする方法を実際には知らないため、これには注意しています。これは実際にサポートされていますか? より良い代替手段はありますか？

私がjsbinで試みた組み合わせを見て、いじることができます。

背景: これはdgridに似たデータグリッドコンポーネント用です。上下にスクロールするときに行のサイズが変わると、スクロールが不安定で振動し、不快なユーザーエクスペリエンスが発生します。

score 1 · Accepted Answer

1

于 2013-10-09T21:05:23.607 に答える

score 0 · Accepted Answer

に設定<td>してみましたdisplay: inline-block;か？jsBin の例を更新しました。

td {
    height: 1em;
    border: 1px solid blue;
    overflow: hidden;
    text-overflow: ellipsis; 
    display: inline-block; /* this */
}

2 に答える 2