0

この無料の HTML テンプレートを使用して、Web アプリケーションに関する情報を表示するページを作成しています。この JsFiddle を参照してください: http://jsfiddle.net/wx3Gz/1/

問題は、メイン コンテンツの 3 つの列の表です。テーブルをそれぞれ列と同じ幅 (274px) に設定したいのですが、コンテンツは自動的に配置されるはずです。

最初のテーブルでは、2 番目の列をコンテンツが必要とする幅にしたいと思います。最初の列は、使用可能な幅の残りを占有し、省略記号でオーバーフローする必要があります。

私がすでに試したもの（テーブルレイアウトを使用してテーブルにdisplay:blockを設定する）は、すべての列が同じ（間違った）幅を持つテーブル、またはほとんどの場合、コンテンツが列をオーバーフローするテーブルになりました。

完璧な解決策は、3 つのグループ要素のすべてのテーブルを最大幅にフォーマットし、列 (つまり、th 要素) に css クラスを設定できるようにすることです。これにより、列が広くなる場所で省略記号を表示する必要があります)。ほぼ完璧なソリューションでは、すべてのセルにその css クラスが必要です。

Firefox と IE7/8 で動作するにはこれが必要です。IE9 と Chrome も理想的です。

4

1 に答える 1

0

max-widthテーブルではなく、テーブル セルにa を直接設定してみてください。

td {
    max-width: 200px;
}
td div, td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

コードの修正版は次のとおりです。Windows を使用していないため、IE をチェックインできません。

于 2012-09-03T13:40:32.003 に答える