5

Tablesorterはブートストラップ2で正しく並べ替えることができましたが、テーブルヘッダーの色と注意を設定する方法がわかりませんでした。

私がここで見つけた最も可能性の高いcssは次のとおりです。

table .header {
    cursor: pointer;
}

table .header:after {
  content: "";
  float: right;
  margin-top: 7px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #000000 transparent;
  visibility: hidden;
}

table .headerSortUp, table .headerSortDown {
  background-color: #f7f7f9;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

table .header:hover:after {
  visibility: visible;
}

table .headerSortDown:after, table .headerSortDown:hover:after {
  visibility: visible;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

table .headerSortUp:after {
  border-bottom: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #000000;
  visibility: visible;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

しかし、運がありません。

誰かがサクセスストーリーを共有できますか？

4

2 に答える 2

7

たぶん、元の style.css ファイル ( demo )に追加されるはずです:

/* tables */
table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}
table .header {
    cursor: pointer;
}

/* bootstrap */
table.tablesorter .header:after {
    content: "";
    float: right;
    margin-top: 7px;
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: #000000 transparent;
    visibility: hidden;
}
table.tablesorter .headerSortUp, table .headerSortDown {
    background-color: #f7f7f9;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
table.tablesorter .header:hover:after {
    visibility: visible;
}
table.tablesorter .headerSortDown:after, table .headerSortDown:hover:after {
    visibility: visible;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}
table.tablesorter .headerSortUp:after {
    border-bottom: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000000;
    visibility: visible;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}

また、ヘッダー内に追加の HTML を追加する場合はonRenderHeader、たとえば、各ヘッダー内にスパンを追加するために使用できる文書化されていないオプションがあります ( ref ):

$(function(){
  $("table").tablesorter({
    onRenderHeader: function(){
      this.prepend('<span class="icon"></span>');
    }
  });
});
于 2012-06-16T02:15:04.513 に答える
2

私は同じ問題に直面し、非常に簡単な解決策を見つけました：

table.tablesorter thead tr .header {
    background-image: url(../img/tablesorter-bg-grey.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
    min-width: 30px;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(../img/tablesorter-asc-grey.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(../img/tablesorter-desc-grey.gif);
}

もちろん、ソート可能なテーブルにクラス「tablesorter」を追加する必要があります。画像を変更しました。含まれている標準の画像に合わせてimagefilenamesを調整する必要があります。

于 2012-11-12T12:49:31.293 に答える