डेटाटेबल्स

Question

के लिए कॉलम चौड़ाई कैसे सेट करें मैं सभी DataTables (स्क्रॉल प्लगइन के साथ) कॉलम के लिए स्थिर चौड़ाई सेट करना चाहता हूं।

यह कॉलम को व्यापक बनाता है अगर मैं सभी को छोड़कर <th> टैग के लिए चौड़ाई निर्धारित करता हूं। और यह काम नहीं करता है अगर चौड़ाई सभी टैग के लिए सेट है। इसके अलावा, जब मैं डेवलपर टूल के माध्यम से निरीक्षण करता हूं, तो मुझे <th> तत्व चौड़ाई 400px के साथ नहीं दिखाई देता है। तत्वों की अलग चौड़ाई है: 115px, 132px, 145px ...

वह क्यों है? मैं कॉलम के लिए सटीक चौड़ाई कैसे सेट कर सकता हूं?

सीएसएस

.big-col { 
    width: 400px; 
} 

जे एस

var options = { 
    "sScrollX": "100%", 
    "sScrollXInner": "110%", 
    "bScrollCollapse": true, 
    "colReorder": true 
}; 

$(document).ready(function() { 
    $('#example').dataTable(options); 
}); 

पूर्ण उदाहरण: http://fiddle.jshell.net/sergibondarenko/o1hoabep/8/

इसके अलावा, मैं columnDefs विकल्प की कोशिश की, सफलता नहीं मिली।

var options = { 
    "columnDefs": [ 
     { "width": "100px", "targets": "_all" } 
    ] 
}; 

कॉलम की सटीक संख्या अज्ञात है। HTML तालिका को सर्वर पक्ष से डेटा के आधार पर गतिशील रूप से बनाया गया है।

Answer 1

th.big-col{ 
width:400px !important; 
} 

table#example{ 
table-layout:fixed; 
} 

!important चौड़ाई के लिए ओवरराइड करने के लिए किसी भी इनलाइन शैलियों datatables द्वारा लागू किया जा रहा है, और संभवतः अन्य शैलियों jsfiddle या जो कुछ भी द्वारा लागू किया जा रहा आवश्यक है। table-layout:fixed; प्रत्येक कॉलम में सभी कक्षों की चौड़ाई तय करने के लिए तालिका रेंडरर पहली पंक्ति में कक्षों की चौड़ाई को प्राथमिकता देगा।

पैडिंग के कारण फिल्ड में 400 के बजाय 410 पर सबकुछ है।

http://fiddle.jshell.net/o1hoabep/9/

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout