तालिका-सेल संपत्ति चौड़ाई को अनदेखा करती है

Question

मैंने एक div के लिए एक सीएसएस प्रोपेरी टेबल-सेल सेट किया है। मैंने div के लिए चौड़ाई निर्दिष्ट की है और ओवरफ्लो छिपा हुआ सेट किया है। लेकिन टेबल-सेल प्रॉपर्टी के कारण div को चौड़ाई की परवाह नहीं है। अगर मैं कोई बड़ी छवि डालता हूं, तो यह चौड़ाई से बाहर हो जाता है। मैं टेबल-सेल का उपयोग कैसे कर सकता हूं और div के लिए निश्चित चौड़ाई का उपयोग कैसे कर सकता हूं?

.right{ 
    display: table-cell; 
    overflow: hidden !important; 
    vertical-align: top; 
    width: 400px; 
} 

Answer 1

अजीब, this JSFiddle मेरे लिए काम करता प्रतीत होता है।

आपको किस ब्राउज़र में समस्याएं हैं?

इसके अलावा, अपनी तालिका कोशिकाओं के लिए अधिकतम चौड़ाई को मजबूर करने के लिए, max-width संपत्ति का उपयोग करें। आप see it here कर सकते हैं, और कोड नीचे है।

HTML:

<div class='table'> 
    <div class='tr'> 
    <div class='right'>hey</div> 
    </div> 
</div>​ 

सीएसएस:

.table { 
    display: table; 
} 
.tr { 
    display: table-row; 
} 
.right{ 
    display: table-cell; 
    overflow: hidden !important; 
    vertical-align: top; 
    max-width: 400px; 
    outline: 1px solid #888; 
}​ 

Answer 2

display: table-cell तालिका आकार नियमों का पालन करेगा - यदि सामग्री बहुत बड़ा है, यह वह उचित बनाने के लिए विस्तार होगा।

क्या आपको वास्तव में display: table-cell का उपयोग करने की आवश्यकता है? इसे काम करने के लिए, आपको इसे किसी अन्य div में लपेटना होगा, इसे 400 की चौड़ाई दें और इसे overflow: hidden पर सेट करें लेकिन यह काउंटर-उत्पादक लगता है।