2

グリッド ビューの列ヘッダーとして使用する HTML テーブルがあります。列ヘッダーをクリックすると、グリッド ビューを並べ替える JavaScript がトリガーされ、列が並べ替えられたことを示すアイコンが、以下のように列テキストの横に表示されます。

|---------------------------------------------------------------------------------|
| <span> Column 1 </span> <div class="sortImgSprite" /> | <span> Column 2 </span> |
|---------------------------------------------------------------------------------|

テーブルには table-layout: fixed があり、テキストのスパンには overflow: hidden、text-overflow: ellipsis、white-space: nowrap があります。

テキストが非常に長い場合、必要な省略記号効果が得られますが、並べ替えアイコン スプライト (幅と背景が設定された div) がテーブル セルの右側から切り取られます。並べ替えアイコンが、CSS を介して省略テキストよりもスペースを優先するようにする方法はありますか? 列が「並べ替えられている」場合は、並べ替えの img が常にそこにあり、テキストがセルの表示スペースから img を押し出すのではなく、テキストが楕円形になるようにします。

4

3 に答える 3

2

画像に追加しているフロートはわかりませんが、右にフロートして約 5 px の右余白を追加しようとしましたか? それはそれを中に押し込むでしょう。

于 2009-01-22T00:15:11.397 に答える
0

代わりに「sortImgSprite」クラスを<span>タグに追加しないのはなぜですか? とにかく JavaScript を介して並べ替えを行っているので、テーブルの列へのハンドルが必要ですか?

ユーザーが列をソートするときは、「sortImgSprite」クラスを左または右に追加し (必要に応じて少しパディングを追加することもできます)、その列がソートされなくなったら削除します。

...または私は何かを逃しましたか?

ああ。私は何かを見逃していました。オーバーフローしたテキストは、ヘッダー自体ではなく、列ヘッダーの下の行にあると考えました。

では、クラスをテーブル ヘッダーに追加するとどうなるでしょうか。あなたの<th>タグ (それを使用している場合) は、画像をセルの右側に配置し、<span>タグはそのクラスを継承して他の書式設定 (テキスト オーバーフローなど) を追加できますか?

繰り返しになりますが、テーブル ヘッダー セルの背景画像がテキストの背後にはっきりと見えるように、スパンの右側にパディングが必要になる場合があります。

于 2009-01-22T00:21:43.100 に答える