मैं प्रत्येक कॉलम में एक टेक्स्टबॉक्स के साथ (प्रत्येक कॉलम की सामग्री को फ़िल्टर करने की अनुमति देने के लिए) मेरी HTML तालिका (या शीर्ष पर, जो कुछ भी) के नीचे एक पंक्ति जोड़ना चाहता हूं।HTML तालिका में टेक्स्टबॉक्स: ऑटो-आकार कैसे करें?
FWIW, तालिका jQuery डेटाटेबल प्लग-इन पर आधारित है।
समस्या यह है कि टेक्स्टबॉक्स कॉलम को चौड़ा करते हैं। मैं चाहता हूं कि प्रत्येक टेक्स्टबॉक्स इसके कॉलम की चौड़ाई को बिना बढ़ाए भरें। मैं यह कैसे कर सकता हूँ?
पैरेंट टीडी की चौड़ाई प्राप्त करने के लिए <input type="text" style="width:100%"/> आज़माएं।
मैंने jQuery टेबल्स का उपयोग नहीं किया है, लेकिन मुझे लगता है कि यदि आप 'चौड़ाई: 80%' सेट करते हैं; और 'td' के लिए चौड़ाई को परिभाषित करें, टेक्स्ट-बॉक्स को अपने माता-पिता ('td') से इसके आयामों का उत्तराधिकारी होना चाहिए।
कि काम नहीं करता है, या आप एक अलग दृष्टिकोण चाहते हैं, आप की कोशिश कर सकते:
td > input[type="text"] {width: 5em;} /* or whatever */
मुझे लगता है कि [चौड़ाई 100%] सीमाओं और गद्दी के बाद से इस दृष्टिकोण के साथ एक समस्या हो सकती है पाठ बॉक्स में से कुछ को चौड़ाई में जोड़ा जाता है।
दरअसल।
आप इनपुट के सीमाओं और पैडिंग के समान आकार के इनपुट (या केवल सभी कोशिकाओं) वाले सेल में padding-right जोड़कर इसके लिए क्षतिपूर्ति कर सकते हैं। तब इनपुट सेल सामग्री क्षेत्र से बाहर फैलता है, लेकिन केवल पैडिंग पर होता है, इसलिए यह गड़बड़ नहीं करता है।
यह सामान्य टेक्स्ट इनपुट के लिए ठीक है। यदि आपको अन्य तत्व भी मिलते हैं जैसे चुनिंदा बॉक्स या बटन जिन्हें आप आकार बदलना चाहते हैं, तो पैडिंग विधि बैकफायर कर सकती है क्योंकि आईई पर चयन की 'चौड़ाई' सीमा और पैडिंग (ओएस विजेट होने के कारण))।
सबसे ब्राउज़रों के लिए, इसे ठीक करने के लिए सबसे आसान और सबसे सुसंगत तरीका CSS3 box-sizing संपत्ति है:
td.input input {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
IE6-7 अभी तक इस का समर्थन नहीं करता है, तो आप अभी भी क्षेत्रों है कि नहीं प्राप्त कर सकते हैं इन ब्राउज़रों में काफी लाइन है। यदि आप परवाह करते हैं, तो आप विशेष रूप से उन लोगों के लिए एक पैडिंग वर्कअराउंड जोड़ सकते हैं।
बॉक्स आकार के बारे में जानकारी के लिए धन्यवाद –
मुझे पूरी तरह से यकीन नहीं है, लेकिन मुझे लगता है कि इस दृष्टिकोण के साथ कोई समस्या हो सकती है क्योंकि टेक्स्ट बॉक्स की सीमाओं और पैडिंग को चौड़ाई में जोड़ा जाता है। यही है, अगर टीडी 100 पीएक्स चौड़ा है और टेक्स्ट बॉक्स में, 1 पीएक्स सीमा और 4 पीएक्स पैडिंग है, तो टेक्स्ट बॉक्स को 100 + 2 * (1 + 4) = 110 पीएक्स की कुल चौड़ाई की आवश्यकता होगी यदि चौड़ाई = " 100% "। मुझे लगता है। –
हा! इतना सरल है! आईई 8 में ठीक काम करता है लेकिन क्रोम में नहीं: चौड़ाई प्रतिशत कॉल चौड़ाई से मेल खाता है लेकिन कमांडर चौड़े हैं। –
आप चौड़ाई का प्रयास कर सकते हैं: ऑटो या चौड़ाई: – ntan