Twitter bootstrap 如何为tablesorter和bootstrap设置css？

Tablesorter可以在bootstrap 2中正确地进行排序，但我不知道如何设置表头的颜色和插入符号

我发现的最有可能的css是：

但是没有运气

---

有人可以分享成功的故事吗？

也许应该将其添加到原始style.css文件（）中：

此外，如果要在标题内添加任何其他HTML，则可以使用未记录的

onRenderHeader

选项在每个标题内添加一个span（）：

$（函数（）{
$（“表”）.tablesorter({
onRenderHeader:function（）{
这个。前置（“”）；
}
});
});

我面对同样的问题，找到了一个非常简单的解决方案：

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”。我已经更改了图像，您应该将图像文件名调整为包含的标准图像。

谢谢您的快速回复，但它不起作用。问题是this.prepend或this.wrapInner将显示“对象不支持”错误。嗯，它正在演示中工作。。。尝试将this转换为jQuery对象：

$（this）

Oh！它在添加$（此）后工作。但仍有问题：1。鼠标指向标题时“手”没有显示，排序后不会改变颜色。请帮忙！要获取鼠标指针，请确保已为

.header

定义包含

cursor:pointer

。要获得排序方向的不同颜色，请拆分此css定义：

table.tablesorter thead tr.headerSortDown，table.tablesorter thead tr.headerSortUp{background color:#8dbdd8；}

感谢您耐心的回答，但它仍然不起作用。还有一个问题，tablesorter有两个定义&table，看起来tableSorterCSS可以工作，但bootstraps不能。对吗？

/* 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;
}

$(function(){
  $("table").tablesorter({
    onRenderHeader: function(){
      this.prepend('<span class="icon"></span>');
    }
  });
});

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);
}