0

私はこれを行う方法についての回答を探しました。これには、スタック オーバーフローに関する数十の回答が含まれますが、ほとんど解決策ではありません。

いくつかのオプションを使用してテーブル/リストを作成しようとしています。次の列を持つテーブルを想像してください。

削除: シンプルなアイコンです。これは固定幅でなければなりません (画像を使用するため)

名前: リスト内のアイテムの名前。これで残りの使用可能なスペースがいっぱいになるはずですが、テキストがオーバーフローする場合は、省略記号を表示したいと思います。

オプション A/B/C: これらはチェック ボックスであり、固定されていると想像できます。

したがって、幅の広いテーブルでは、次のようになります。

| X | Item 1 in the list               | A | B | C |
| X | Item 2                           | A | B | C |
| X | Item 3 has a pretty long name    | A | B | C |
| X | Item 4's name is long, realll... | A | B | C |

そして、短いテーブルで (または、ウィンドウのサイズが変更された後):

| X | Item 1 in the list     | A | B | C |
| X | Item 2                 | A | B | C |
| X | Item 3 has a pretty... | A | B | C |
| X | Item 4's name is...    | A | B | C |

誰かがこれを実際に示すフィドルを提供できれば、それは絶対に素晴らしいことです。

編集：プリマス、どうもありがとう！

4

1 に答える 1

1

ここにフィドルを作成しました。

これらは重要なスタイルです:

table
{
    table-layout:fixed;
}

.col2
{
    width:auto;
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

これはあなたが求めているものですか？

于 2013-09-12T02:53:47.390 に答える