Come impostare il css per tablesorter e bootstrap?

Question

Tablesorter poteva eseguire correttamente l'ordinamento in bootstrap 2, ma non sono riuscito a scoprire come impostare il colore e il punto di intestazione dell'intestazione della tabella.

il CSS più probabile che ho trovato è here:

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

ma senza fortuna.

Qualcuno potrebbe condividere la storia di successo?

Answer 1

Forse dovrebbe essere aggiunto al file del style.css originale (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; 
} 

Inoltre, se si desidera aggiungere qualsiasi ulteriore codice HTML all'interno della testata, c'è un'opzione non documentata che onRenderHeader è possibile utilizzare per aggiungere, per esempio, un arco all'interno di ogni intestazione (ref):

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

Answer 2

ho affrontato lo stesso problema e trovato una soluzione molto semplice:

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

Devi aggiungere alle tue tabelle ordinabili la classe "tablesorter", ovviamente. Ho modificato le immagini, dovresti adattare i nomi dei file immagine alle immagini standard incluse.