टेबल्सटर + फ़िल्टर

Question

टैबलेटर्स सीएसएस डिफ़ॉल्ट थीम का उपयोग करते समय, यदि मैं टेबल चौड़ाई सेट करने से बचता हूं तो मुझे सबसे लंबे समय तक समायोजित सभी स्तंभों के साथ एक अच्छी तालिका मिलती है। लेकिन, यदि मैं फ़िल्टर विजेट जोड़ता हूं, तो बहुत से खाली स्थान के साथ सभी कॉलम पहले से कहीं अधिक व्यापक दिखाई देते हैं। कभी-कभी टेक्स्ट कॉलम लपेटे जाते हैं, जबकि अन्य लगभग खाली दिखते हैं।

क्या इस व्यवहार से बचा जा सकता है? धन्यवाद!

Answer 1

फ़िल्टर इनपुट अंतर्निहित आकार ब्राउज़र, संस्करण और आपके ओएस पर निर्भर करता है। तो बस एक टेबल सेल में एक इनपुट जोड़ना इसे उस आकार तक फैलाएगा। लेकिन आप सीएसएस का उपयोग कर max-width या width सेट कर सकते हैं।

.tablesorter, .tablesorter .tablesorter-filter { 
    width: auto; 
} 

आप स्तंभों संकरा चाहते हैं, सिर्फ एक पिक्सेल आकार के रूप में इनपुट चौड़ाई सेट (demo:

मैंने updated the demo आप को दिखाने के लिए कैसे विषय सेट शैली अधिरोहित जा सकता है इस सीएसएस के साथ साझा किया,):

.tablesorter { 
    width: auto; 
} 
.tablesorter .tablesorter-filter { 
    width: 50px; 
} 

---

अद्यतन: यदि आप अलग अलग चौड़ाई आदानों की जरूरत है, इस सीएसएस (demo) की कोशिश:

+०१२३५१६४१०६

.tablesorter .tablesorter-filter-row td:nth-child(4n+1) .tablesorter-filter { 
    width: 80px; 
} 
.tablesorter .tablesorter-filter-row td:nth-child(4n+2) .tablesorter-filter { 
    width: 40px; 
} 

जहां 4n में 4 तालिका में स्तंभों की संख्या है (एक-आधारित सूचकांक)

Answer 2

एक और तरीका है कुछ खाली जगह से छुटकारा पाने के लिए 100% करने के लिए चौड़ाई सेट कर रहा है

.tablesorter .tablesorter-filter { 
    width: 100%; 
} 

table.tablesorter tbody td { 
    color: #3D3D3D; 
    padding: 4px; 
    background-color: #FFF; 
    vertical-align: top; 
} 

करने के लिए::

Answer 3

आप अपनी तालिका डेटा में अटूट तार है, तो आप को बदलने की कोशिश करना पड़ सकता है

table.tablesorter tbody td { 
    color: #3D3D3D; 
    padding: 4px; 
    background-color: #FFF; 
    vertical-align: top; 
    max-width:400px; 
    word-wrap:break-word; 
} 

(इस क्रोम और IE11 में मेरे लिए काम किया)

Answer 4

आप निम्नलिखित शैली

#sites_list_table .tablesorter-filter-row td>[data-column="1"] { 
    width: 100px; 
} 
#sites_list_table .tablesorter-filter-row td>[data-column="4"] { 
    width: 100px; 
} 
#sites_list_table .tablesorter-filter-row td>[data-column="6"] { 
    width: 100px; 
} 

(#sites_list_table तालिका के आईडी है)

का उपयोग कर प्रत्येक पाठ boxe के आकार को बदल सकते हैं