अधिकतम-चौड़ाई के साथ तालिका सेल अतिप्रवाह को नियंत्रित करना

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

• हम इस कॉलम को एक निश्चित चौड़ाई देंगे;
• यह न्यूनतम सामग्री चौड़ाई → न्यूनतम सामग्री चौड़ाई (MCW) के बराबर होगा।

स्तंभों पर लेआउट विधि में एक महत्वपूर्ण माइनस होता है → यदि ब्लॉक के अंदर की सामग्री इसके दायरे से बाहर जाती है, तो चौड़ाई के माध्यम से निर्धारित प्रतिबंध इसे प्रभावित नहीं करेगा, क्योंकि इस मामले में MCW अधिक है। यदि हम बाएं कॉलम को पूरी चौड़ाई में फैलाना चाहते हैं, तो हमें इसकी चौड़ाई को 100% पर सेट करना होगा। तदनुसार, अधिकतम-चौड़ाई: 100%; कोई परिणाम नहीं देगा, क्योंकि MCW पहले से ही इस मूल्य से अधिक है। नतीजतन, हमारा पूरा लेआउट खिंचाव और कंटेनर से आगे बढ़ जाएगा, इससे कोई फर्क नहीं पड़ता कि हम क्या प्रतिबंध लगाते हैं।

यहां दाईं ओर निश्चित कॉलम विकल्प के साथ एक उदाहरण लेआउट दिया गया है:

<div class="container"> <div class="leftBlock">   </div> <div class="rightBlock">   </div> </div> 

 .leftBlock, .rightBlock { display: table-cell; vertical-align: top; } .leftBlock { width: 100%; } .rightBlock { width: 200px; max-width: 200px; min-width: 200px; } 

Jsfiddle उदाहरण

जैसा कि आप देख सकते हैं, अब तक कोई समस्या नहीं है। अब बाएँ स्तंभ तत्वों में जोड़ें जो दाईं ओर स्थित कॉलम माइनस की चौड़ाई को पार कर जाएगा:

Jsfiddle उदाहरण

कंटेनर की सीमित चौड़ाई के बावजूद, बाईं ओर सेल एक स्क्रॉल दिखाई दिया। हैक शुरू करने का समय आ गया है। जैसा कि मैंने पहले कहा, अधिकतम-चौड़ाई: 100%; यहां इसका कोई प्रभाव नहीं होगा, लेकिन अगर हम अधिकतम-चौड़ाई निर्धारित करते हैं: 0; तब सेल कंटेनर की चौड़ाई और दाईं ओर सेल की चौड़ाई को ध्यान में रखते हुए पूरी उपलब्ध चौड़ाई पर कब्जा कर लेगा। दुर्भाग्य से, विनिर्देश इस प्रभाव को स्पष्ट नहीं करता है, लेकिन यह सभी ब्राउज़रों में समान काम करता है।
अतिप्रवाह जोड़ने के लिए मत भूलना: छिपा हुआ; और वर्ड-रैप: ब्रेक-वर्ड; अन्यथा, सामग्री कंटेनर से बाहर क्रॉल होगी।

Jsfiddle पर अंतिम उदाहरण

दूसरे मामले में, एक अपरिचित दाहिने कॉलम के साथ, सब कुछ बिल्कुल वैसा ही होगा, बिना किसी चौड़ाई के मापदंडों को निर्दिष्ट किए बिना।