सीएसएस तालिका कक्षों के लिए प्रतिशत चौड़ाई निर्दिष्ट करना

Question

मैं सीएसएस डिस्प्ले का उपयोग कर एक एचटीएमएल/सीएसएस-आधारित सप्ताह कैलेंडर बनाने की कोशिश कर रहा हूं: प्रत्येक दिन से संबंधित divs पर टेबल-सेल स्टाइल। जब मैं 17% से अधिक दिन के divs के लिए प्रतिशत चौड़ाई निर्दिष्ट करता हूं, तो divs पूरे स्क्रीन को अपेक्षित रूप से भरता है (7 * 17%> 100% के बाद)।

यहाँ jsfiddle: http://jsfiddle.net/huDxZ/1/

हालांकि, जब मैं एक प्रतिशत चौड़ाई है कि 16% या उससे कम, divs पूरी तरह से अलग तरह से व्यवहार, पेज चौड़ाई का ही हिस्सा लेने निर्दिष्ट करें।

यहाँ jsfiddle: http://jsfiddle.net/DLjnH/

मैं अपने दिन divs चाहते हैं प्रत्येक के बारे में 14% की चौड़ाई के लिए तो वे मोटे तौर पर पृष्ठ की चौड़ाई को भरने और बराबर आकार है। दुर्भाग्य से, 14% की चौड़ाई और भी बदतर लगती है। यहाँ

jsfiddle: http: //jsfiddle.net/YB5bY/

क्या इस अप्रत्याशित व्यवहार उत्पन्न कर रहा है? क्या इसके चारों ओर कोई रास्ता है? मुझे स्पष्ट रूप से चौड़ाई निर्दिष्ट करने की आवश्यकता है क्योंकि अंत में मैं कैलेंडर के दिनों को माउसओवर पर विस्तारित करना चाहता हूं।

कृपया, कोई समाधान शामिल नहीं है।

धन्यवाद!

Answer 1

सीएसएस नियम प्रतिशत मूल्य हमेशा माता-पिता की एक ही संपत्ति के मूल्य के सापेक्ष होते हैं।
कंटेनर का सुस्पष्ट चौड़ाई जोड़ने का प्रयास करें:

#calendar { 
    display: table; 
    height:900px; 
    width: 100%; 
} 

, जिसे आप ".day" तत्वों के लिए 14% उपयोग कर सकते हैं:

DEMO

Answer 2

ठीक है, मैं पागल हो सकता है, लेकिन मैं ऐसी बात के लिए एक मेज का प्रयोग करेंगे ...

नहीं सभी तालिकाओं बुराई, बस लेआउट के लिए इस्तेमाल होते हैं ...

Answer 3

मैं तुम्हें कारण नहीं बता सकता, लेकिन अगर आप कंटेनर div को दो मामलों के व्यवहार की 100% चौड़ाई रखने के लिए मजबूर करते हैं।

#calendar { 
    display: table; 
    height:900px; 
    width: 100%; 
} 

अद्यतन संस्करण: http://jsfiddle.net/DLjnH/1/

Answer 4

आपका तालिका सेल चौड़ाई माता-पिता चौड़ाई के सापेक्ष हैं, फिर भी माता-पिता के साथ ऑटो/अनिर्धारित रहता है। width: 100%; को अपने #calendar सीएसएस परिभाषा में सही तरीके से व्यवहार करने के लिए जोड़ें।