Làm thế nào để thiết lập css cho tablesorter và bootstrap?

Question

Tablesorter có thể làm cho việc sắp xếp chính xác trong bootstrap 2, nhưng tôi không thể tìm hiểu làm thế nào để thiết lập màu sắc và dấu mũ của tiêu đề bảng.

Các css khả năng nhất mà tôi tìm thấy here là:

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

nhưng không có may mắn.

Có ai có thể chia sẻ câu chuyện thành công không?

Answer 1

Có lẽ nó là nghĩa vụ phải được bổ sung vào file style.css gốc (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; 
} 

Ngoài ra, nếu bạn muốn thêm bất kỳ HTML bổ sung bên trong tiêu đề, có một tùy chọn onRenderHeader không có giấy tờ mà bạn có thể sử dụng để thêm, ví dụ, một khoảng bên trong mỗi tiêu đề (ref):

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

Answer 2

tôi phải đối mặt với vấn đề tương tự và tìm thấy một giải pháp rất đơn giản:

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

Bạn phải thêm vào bảng có thể sắp xếp của bạn là lớp "bảng phân đoạn" tất nhiên. Tôi đã thay đổi hình ảnh, bạn nên điều chỉnh các imagefilenames thành các hình ảnh tiêu chuẩn đi kèm.