गतिशील कॉलम के साथ तालिका लेकिन लेआउट तय

Question

मुझे एक तालिका चाहिए जो 100% है यदि पृष्ठ जिसमें गतिशील रूप से बनाए गए कॉलम की संख्या हो सकती है। प्रत्येक कॉलम में बहुत लंबे शब्द हो सकते हैं, इतने लंबे समय तक कि वे सभी एक पृष्ठ पर फिट नहीं हो सकते हैं। इसे ठीक करने के लिए मैंने table-layout: fixed का उपयोग किया जिसने पृष्ठ पर दिखाई देने वाली तालिका के सभी कॉलम बनाए। समस्या यह है कि मैं अभी भी प्रत्येक कॉलम की चौड़ाई गतिशील होना चाहता हूं ताकि यदि कॉलम में छोटे शब्द हों तो यह लंबे शब्द के साथ एक से छोटा होना चाहिए।

उदाहरण: jsfiddle।

तालिका 1 हमेशा सभी कॉलम दिखाता है लेकिन जब पृष्ठ पर्याप्त चौड़ा होता है तो यह शब्द को तोड़ देता है भले ही अन्य कॉलम में खाली स्थान हो।

तालिका 2 कॉलम से अधिक व्यापक होने पर ठीक काम करता है लेकिन पहला कॉलम अन्य कॉलम को स्क्रीन से बाहर/अन्य वस्तुओं पर धक्का देता है जब खिड़की छोटी होती है।

क्या यह सब पाने का कोई तरीका है? एक सारणी जिसमें हमेशा सभी कॉलम और कॉलम होते हैं जो फिट होने के मुकाबले व्यापक नहीं होते हैं? मैं इसे शब्दों को तोड़ना चाहता हूं अगर इसे टेबल को बहने के बजाय करना है।

मैं एक जेएस/jQuery समाधान स्वीकार कर सकता हूं लेकिन यदि सीएसएस के साथ यह संभव है तो यह संभव है।

संपादित करें:

छोटे तालिका: नोट: asasdasdasdasdasdasdasdasdasdasdasd एक शब्द है कि क्योंकि तालिका इस से बड़ा नहीं हो सकता है छोटा है है।

+--------------------+----------+---------+ 
|asasdasdasdasdasdasd|qweqweqweq|zxczxczxc| 
|asdasdasdasdasd  |   |   | 
+--------------------+----------+---------+ 

बड़े तालिका: नोट: सभी कॉलम नहीं बराबर आकार के, खासकर वे खाली स्थान के साथ वृद्धि समान रूप से वितरित कर रहे हैं।

+--------------------------------------+-------------+------------+ 
|asasdasdasdasdasdasdasdasdasdasdasd |qweqweqweq |zxczxczxc | 
+--------------------------------------+-------------+------------+ 

Answer 1

तो मैं समझता हूँ कि यह एक प्रारंभिक बिंदु हो सकता है:

var tds; 

$("table").each(function() { 

    tds = $("td"); 

    for(var x = 0; x < tds.length; x++){ 
     tds.eq(x).css('max-width', '100px'); 
    } 

}); 

Answer 2

सभी सबसे पहले "तालिका लेआउट: तय" को दूर संपत्ति।

निम्नलिखित कोड का प्रयास करें, यह आपके मामले में पूरी तरह से काम करना चाहिए:

$(document).ready(function(){ 

$("table").find('tr').children('td').each(function() { 
    var wdth = $(this).html().length + 10; 
    $(this).css({ 'padding-right': '10px' }, { 'width': wdth + 'px' }); 
    }); 
});