2

Tablesorter Jquery プラグインを使用してテーブルを並べ替えていますが、スタイルシートで指定された画像の背景画像は、列の実際のコンテンツが長すぎて列幅をヘッダー テキスト。

例として、http: //tablesorter.com/docs/にアクセスし、上向き/下向きの矢印が Age 列のテキストの背後に来るまでブラウザを縮小します。同様のことが起こっています。

列の幅を十分に広くするようにハード コードすることはできますが、CSS ファイルにはより再利用可能なソリューションが必要です。

の特定の「パディング」を指定する方法を知っている人はいますか。padding-right と margin-right は何の効果もないようです。

4

4 に答える 4

3

次の CSS を使用します。

thead th
{
    padding-right: 20px;
}

これは、画像が配置される「空白」スペースを作成することで問題を解決します。

于 2009-02-06T08:49:52.720 に答える
1

これが今あなたの細胞にあるものです：

<th class="header">Last Name</th>

背景画像はクラスヘッダーに設定されているため、asc または desc を注文できます

唯一の解決策は、このようなことを試すことだと思います

<th class="header">
<div style="margin-right: 10px;">Last Name</div>
</th>

このようにして、画像は常にタイトルの右側に表示されます。これが役立つことを願っています

于 2009-02-06T08:29:07.817 に答える
1

または、これをcssに追加するだけです：

th.header {
    padding-right: 20px;
}
于 2009-02-06T08:32:43.647 に答える
0

これは古い質問であることは知っていますが、同じ問題に遭遇したときに遭遇し、th のパディングまたはマージンが役に立たないことがわかりました。

Tablesorter はヘッダー内に div を追加し、div に margin-right を追加して問題を解決できます。

テーブルソーターは、ヘッダーを次のようにします。

<th data-column="2" class="tablesorter-header">
    <div class="tablesorter-header-inner">Header Text Here</div>
</th>

だから私はこのcssをdivに入れました：

table.tablesorter thead tr th .tablesorter-header-inner {
    margin-right: 15px;
}
于 2012-09-26T10:56:33.493 に答える