टेबलबोर्ड और बूटस्ट्रैप के लिए सीएसएस कैसे सेट करें?

Question

टेबेलॉर्टर बूटस्ट्रैप 2 में सॉर्टिंग को सही ढंग से बना सकता है, लेकिन मुझे यह नहीं पता था कि टेबल हेडर के रंग और देखभाल को कैसे सेट किया जाए।

सबसे अधिक संभावना सीएसएस मैं 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; 
} 

लेकिन कोई भाग्य के साथ।

कोई भी सफलता की कहानी साझा कर सकता है?

Answer 1

शायद यह मूल style.css फ़ाइल (demo) पर जोड़ा जाना चाहिए था: यदि आप शीर्ष लेख के अंदर किसी भी अतिरिक्त HTML जोड़ना चाहते हैं

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

इसके अलावा, वहाँ एक गैर-दस्तावेजी onRenderHeader विकल्प है कि आप प्रत्येक हेडर के अंदर उदाहरण के लिए, जोड़ने के लिए, अंतराल (ref) का उपयोग कर सकते हैं:

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

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

आपको अपने सॉर्टेबल टेबल्स को कक्षा "टेबलटर" में जोड़ना होगा। मैंने छवियों को बदल दिया है, आपको छविफाइलनाम को मानक छवियों में समायोजित करना चाहिए।