टेबल चौड़ाई div सीमा से परे चला जाता है

Question

मेरे पास div के भीतर तालिका है। अगर मैं इसे आईई 9 या एफएफ के साथ देखता हूं तो यह ठीक है। लेकिन अगर मैं इसे IE8 के भीतर देखता हूं तो तालिका div सीमा से आगे बढ़ती है। कोई विचार?

<div> 
    <table width="100%" > 
    <tr> 
     <td> 
     </td> 
    </tr> 
    </table> 
</div> 

Answer 1

यहाँ समाधान नहीं मिला:

http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

चाल सीएसएस संपत्ति table-layout उपयोग करने के लिए है। इसमें तीन मान ले सकते हैं: ऑटो, निश्चित, और वारिस। सामान्य (प्रारंभिक) मान ऑटो, है जिसका अर्थ है कि तालिका चौड़ाई इसके कॉलम और सीमाओं द्वारा दी जाती है। दूसरे शब्दों में, यदि आवश्यक हो तो यह विस्तारित होता है।

आप क्या उपयोग करना चाहते हैं table-layout:fixed है। बैम! अब तालिका चौड़ी है जैसा आपने सीएसएस में निर्दिष्ट किया है। न आधिक न कम। और मेरे पर आश्चर्य की बात है कि यह ब्राउज़र द्वारा व्यापक रूप से समर्थित है। केवल किसी भी महत्व का ब्राउज़र जो इसका समर्थन नहीं करता है आईई/मैक है, और उस ब्राउज़र का महत्व तेजी से शून्य तक पहुंच रहा है।

अगला यह तय कर रहा है कि तालिका में फिट नहीं होने वाली सामग्री के साथ क्या करना है।यदि तालिका में केवल टेक्स्ट, वर्ड-रैप होता है: ब्रेक-वर्ड (वर्ड-रैप CSS3 टेक्स्ट इफेक्ट मॉड्यूल में निर्दिष्ट है) ब्राउज़र को ओवरफ्लो को रोकने के लिए आवश्यक शब्दों को तोड़ने के लिए मजबूर करेगा।

Answer 2

टेबल चौड़ाई 100% के रूप में दें ताकि वह div पर कब्जा कर सके और इसे पार न करे।

Answer 3

आप इसे overflow: scroll; साथ उसके अपने div अंदर सेट कर सकते हैं इतना है कि यह एक स्क्रॉलबार बनाता है जब तालिका बहुत ज्यादा फैलता है ...

Answer 4

जांच क्या बॉक्स आकार ब्राउज़र द्वारा सेट किया जाता है।

box-sizing: content-box; का अर्थ है:

निर्दिष्ट चौड़ाई और ऊंचाई क्रमश: चौड़ाई और ऊंचाई के लिए लागू तत्व की सामग्री बॉक्स के । तत्व की पैडिंग और सीमा इस क्षेत्र के बाहर खींची गई है।

box-sizing: border-box; का अर्थ है:

निर्दिष्ट चौड़ाई और ऊंचाई तत्व के बॉर्डर बॉक्स निर्धारण करते हैं। तत्व पर निर्दिष्ट कोई भी पैडिंग या सीमा शेष क्षेत्र के अंदर खींचा गया है। सामग्री बॉक्स निर्दिष्ट चौड़ाई और ऊंचाई से संबंधित पक्षों की पैडिंग या सीमा चौड़ाई घटाकर गणना की जाती है।

यह रात सिर्फ box-sizing मान बदलने की बात है। यहां इसके बारे में एक लेख है: http://ie8demo.com/BoxSizing.aspx

Answer 5

क्या आपके पास div पर चौड़ाई सेट है? यदि ऐसा है, तो यह तालिका को ओवरलैप करने की इजाजत देकर इसकी चौड़ाई तक टिकेगी। चौड़ाई को हटाने का प्रयास करें और यह इसके कंटेनर की चौड़ाई तक विस्तारित होगा। यदि आप टेबल आकार को फिट करने के लिए div div चाहते हैं, तो आप इसे फ़्लोट कर सकते हैं।

Answer 6

div टैग में display:table शैली जोड़ें। यह तत्व को तालिका की तरह कार्य करने का कारण बनता है।

Answer 7

उपयोगकर्ता384080 mentioned, table-layout:fixed जोड़ा जाना चाहिए। हालांकि, केवल table-layout होने से समस्या हमेशा ठीक नहीं होती है।

<table style="width:100%;table-layout:fixed">