2011-08-10 28 views
10

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

कुछ कॉलम हमेशा चौड़ाई में 80px होने की आवश्यकता है, इससे कोई फर्क नहीं पड़ता कि ब्राउज़र की चौड़ाई क्या है।

शेष कॉलम को लचीली चौड़ाई की आवश्यकता होती है, लेकिन सभी 75px की न्यूनतम चौड़ाई के साथ समान चौड़ाई के होते हैं;

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

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

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

मैं टेबल लेआउट के साथ तालिका का एक उदाहरण दिया है http://jsfiddle.net/7d2Uj/

कोई भी विचार कैसे न्यूनतम-चौड़ाई इस स्थिति में काम करने के लिए प्राप्त करने के लिए, या ऐसा क्यों हो रहा है

?

उत्तर

2

आपको निश्चित चौड़ाई कॉलम के लिए width, min-width का उपयोग करने की आवश्यकता नहीं है, और आपको कॉलम की संख्या के आधार पर शेष स्तंभों की चौड़ाई को प्रतिशत पर सेट करना चाहिए। आपके मामले में, आपके पास 6 कॉलम थे, इसलिए मैंने इसे 16.66% पर सेट किया।

कार्य उदाहरण: http://jsfiddle.net/6vw66/

+0

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

+1

अंतिम परिणाम यह है कि मैंने कॉलम की कुल संख्या के आधार पर प्रत्येक लचीली चौड़ाई कॉलम पर चौड़ाई प्रतिशत सेट करने के लिए गतिशील रूप से जेनरेट किए गए सीएसएस नियम बनाए हैं। आदर्श नहीं है, लेकिन यह काम कर रहा है। – salonMonsters

11

इस के लिए मेरे वैकल्पिक हल है, जहां कॉलम लगभग ओवरलैप तालिका निचोड़ उस बिंदु पर तालिका चौड़ाई की जाँच, और कहा कि मूल्य के लिए <table> तत्व ही की न्यूनतम-चौड़ाई सेट करने के लिए था । यह तकनीक भी उपयोगी है यदि आपने एक विस्तारणीय कॉलम के साथ लेआउट तय किया है क्योंकि अन्यथा विस्तारित कॉलम पूरी तरह से गायब हो जाएगा क्योंकि खिड़की कम हो जाती है।

पूर्व: http://jsfiddle.net/KTCfs/

+0

उत्कृष्ट, धन्यवाद! – RockyMM

संबंधित मुद्दे