1

ソート可能な html テーブルにヘッダー行があります。現在ソートされている列に上向き矢印/下向き矢印を表示したい。これに背景画像を使用できることはわかっていますが、このサイトはサード パーティによってホストされており、画像ファイルをアップロードすることはできません。スタイルシートのみを編集します。

とにかく CSS を介して矢印を「描画」し、バックグラウンドに貼り付けることはできますか? または、 and を使用afterしcontentて同様のことを達成することはできますか? thソートアップとソートダウンを示すクラスがあります。

http://jsfiddle.net/fJ7Gn/

<table>
    <thead>
        <th class="sortup">A</th> <!-- Draw an arrow via CSS? -->
        <th>B</th>
        <th>C</th>
    </thead>
    <tr>
        <td></td>
        <td></td>
        <td></td>        
    </tr>  
</table>
4

2 に答える 2

3

上矢印の場合:

th:after {
    content:"";
    border-style: solid;
    border-width: 0 8px 10px 8px;
    border-color: transparent transparent #007bff transparent;
}

下矢印の場合:

th:after {
    content:"";
    border-style: solid;
    border-width: 10px 8px 0 8px;
    border-color: #007bff transparent transparent transparent;
}

デモは次のとおりです。http://jsfiddle.net/GLz2b/

于 2013-02-26T16:36:59.933 に答える
1

:before/:after 疑似要素を使用できます。

.sortup:after {
  content:"\25BC";
  float:right;
}
.sortdown:after {
  content:"\25B2";
  float:right;
}

デモ: http://jsfiddle.net/9KHkp/1/

使用キャラクター：

プロパティurl(/path/to/image.png)の代わりに自由に使用してください。content

于 2013-02-26T16:35:05.430 に答える