次の要件に従ってテーブルのスタイルを設定しようとしていますが、どこにも行きません:
- 一部の列の幅は、コンテンツに合わせて縮小する必要があります。
- 他の列の幅は、残りの使用可能な幅をそれらの間で分割する必要があります。
- テーブルの幅は、親の幅を超えないようにする必要があります。
私は1つのアプローチを思いつきました...縮小する列の幅を1pxに設定します。拡張列のコンテンツが大きくなり、テーブルの幅が親の幅を超えるまで増加するまで、それはトリックを行うように見えました。これは、リストされた最後の要件に違反しています。
何か案は？私は壊れた。
Compass/Sass のハイフネーションを使用しています。これは、最後の要件 (テーブルが親の幅を超えない) に役立ちます。Chrome で完全に動作します。Firefox では、表の幅が少し大きすぎます。これは私のスタイルがどのように見えるかです:
td.id
td.actions {
text-align: right;
/* trick table cells into fitting their content with nowrap and zero width */
white-space: nowrap;
width: 1px;
}
td {
@include hyphenation;
}