सीएसएस: तालिका

Question

पर अधिकतम चौड़ाई सेट करें मैं HTML में एप्लिकेशन लॉग उत्पन्न कर रहा हूं, और मैं एक परेशान समस्या में ठोकर खाई हूं।

| Action | Result | File path   | 

उदाहरण के लिए

| Copy | Success | C:\VeryVeryVeryLongF | 
|  |   | ileName.txt   | 

कॉलम 1 और 2 केवल छोटे लेबल प्रदर्शित: उनकी सामग्री एक ही लाइन पर रहना चाहिए मैं निम्नलिखित लेआउट है। दूसरी तरफ, कॉलम 3 में बहुत लंबे फ़ाइल पथ हो सकते हैं, जो एक पंक्ति पर फिट नहीं हो सकते हैं, जो कई पंक्तियों का विस्तार करना चाहिए।

इसे प्राप्त करने के लिए, मैंने पहले कॉलम पर white-space: nowrap; और अंतिम पर white-space: normal; word-break: break-all; का उपयोग किया है। इसके अलावा, तालिका में width:100% है।

यह क्रोम और आईई में बहुत अच्छा काम करता है, लेकिन फ़ायरफ़ॉक्स में नहीं: संक्षेप में, मुझे फ़ायरफ़ॉक्स 8.0 को तालिका के अंतिम कॉलम को विस्तारित करने के लिए कोई रास्ता नहीं दिख रहा है, और इसके बजाय पाठ अवधि दें एकाधिक लाइनें। मेरे पिछले उदाहरण में, फ़ायरफ़ॉक्स प्रिंट

| Copy | Success | C:\VeryVeryVeryLongFileName.txt | 

पहले दो कॉलम में भिन्न हो सकते हैं

पाठ, इसलिए मैं उनके चौड़ाई मैन्युअल रूप से सेट और table-layout: fixed उपयोग नहीं कर सकते। मैंने टेबल पर max-width सेट करने का प्रयास किया है, और इसे div में लपेटने का कोई फायदा नहीं हुआ है।

वास्तविक जीवन उदाहरण के लिए http://jsfiddle.net/GQsFx/6/ देखें =) मैं फ़ायरफ़ॉक्स को क्रोम की तरह कैसे व्यवहार कर सकता हूं?

Answer 1

उपयोग इस सीएसएस

.actions { 
width:100%; 
} 
.actions tr td:nth-child(3) { 
width:200px; 
word-wrap:break-word; 
    display:inline-block; 
} 

Answer 2

अधिकतम-चौड़ाई मान्य सीएसएस 2 लेकिन केवल NS7, ओपेरा 7 और शायद मोज़िला में समर्थित है। मुझे विश्वास नहीं है कि यह आईई 6 में समर्थित है।

Answer 3

width: auto; डालने का प्रयास करें। यह ब्राउज़र को बता देंगे की जरूरत अंतरिक्ष उपयोग करने के लिए ...

Answer 4

इस काम करना चाहिए:

.actions tr td:nth-child(3) { 
     white-space: normal; 
     word-break: break-all; 
     max-width:200px; 
    } 

Answer 5

निम्नलिखित सीएसएस यह मेरे लिए काम करने के लिए प्राप्त करने के लिए लगता है। तालिका-लेआउट के अतिरिक्त ध्यान दें: निश्चित, और शब्द-लपेट का उपयोग: ब्रेक-शब्द।

.actions { 
    width:100%; 
    table-layout:fixed; 
} 

.actions tr td { 
    white-space: nowrap; 
} 

.actions tr td:nth-child(3) { 
    white-space:normal; 
    word-wrap: break-word; 
} 

Answer 6

क्या यह काम करेगा? यह jsfiddle के साथ काम करने के लिए प्रतीत होता है। प्रतिशत आधारित पहले दो कोल्स, फिर मेज-लेआउट के साथ टेबल-लेआउट के साथ तीसरा चौड़ाई ऑटो।

http://jsfiddle.net/keithwyland/uuF9k/1/

.actions { 
    width:100%; 
    table-layout: fixed; 
} 

.actions tr td { 
    white-space: nowrap; 
    width: 15%; 
} 

.actions tr td:nth-child(3) { 
    white-space: normal; 
    word-break: break-all; 
    word-wrap: break-word; 
    width: auto; 
}