imgを使用したCSS列ヘッダー-img / divを右にドッキングする方法

StackOverflow https://stackoverflow.com/questions/467603

質問

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

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

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

テキストが非常に長い場合、必要な省略効果が得られますが、ソートアイコンスプライト（幅と背景が設定されたdiv）はテーブルセルの右側から切り取られます。並べ替えアイコンが、CSSを使用して省略テキストよりもスペースを優先するようにする方法はありますか？列が<！> quot; sorted <！> quot;の場合、ソートimgが常に存在し、セルの表示スペースからimgを押し出すテキストの代わりにテキストが省略されるようにします：

役に立ちましたか？

解決

どのフロートを画像に追加するのかわかりませんが、右にフロートして約5ピクセルの右マージンを追加しようとしましたか？それは内部にそれをプッシュします。

他のヒント

なぜ<！> quot; sortImgSprite <！> quot;を追加しないのですか？代わりに<span>タグのクラスですか？とにかくJavaScriptを使用して並べ替えを行うので、テーブル列へのハンドルが必要ですか？

ユーザーが列でソートするとき、<！> quot; sortImgSprite <！> quot;を追加します。クラスを左または右に配置し（必要に応じて少しパディングを追加する）、その列がソートされなくなったら削除します。

...または何か見逃したことがありますか？

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

わかりました。では、クラスをテーブルヘッダーに追加する場合はどうでしょうか。 <th>タグ（使用する場合）で画像をセルの右に揃えてから、<=>タグでそのクラスを継承し、他のフォーマット（テキストオーバーフローなど）を追加できますか？

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

推奨事項に感謝します！ CSS経由で必要なものを取得するために私がやったことは次のとおりです。

<html>
<head>
<style type="text/css">
table
{
   table-layout:fixed;
   width: 300px;
}

div.foo
{
   float:right;
   width:25px;
   height:1.2em;
   background-color:green;
}

.bar
{
   margin-right:30px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}
</style>
</head>

<body>
<table border="1">
   <tr>
      <td>
         <div class="foo"></div>
         <div class="bar" title="This is some text. This is some text. This is some text. This is some text.">This is some text. This is some text. This is some text.</div>
      </td>
   </tr>
</table>
</body>  
</html>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top