क्या मेरे पास इनपुट इनपुट तत्व तालिका तालिका की चौड़ाई भर सकता है?

Question

मैं एक इनपुट [टाइप = टेक्स्ट] तत्व हमेशा एक ही चौड़ाई के समान होना चाहता हूं क्योंकि तालिका कक्ष में निहित है। मुझे यह सुनिश्चित करने की आवश्यकता है कि तालिका कक्ष की चौड़ाई इनपुट तत्व की चौड़ाई से प्रभावित न हो।

मैं इसे सीएसएस के साथ कैसे कर सकता हूं? क्या मुझे जेएस का उपयोग करने की आवश्यकता होगी? यदि हां, तो यह निर्धारित करने का सबसे अच्छा तरीका क्या होगा कि तालिका कक्ष आकार बदल गया था?

Answer 1

शैली (या कक्षा) चौड़ाई को सेट करने के बारे में क्या: 100%; एक टेबल के अंदर इनपुट तत्वों के लिए?

कुछ इस तरह:

td input.myclass[type=text] 
{ 
    width: 100%; 
} 

Answer 2

सीएसएस चाल करना चाहिए:

#my_input { 
    width: 100%; 
} 

#my_table { 
    table-layout:fixed; 
} 

Answer 3

यदि यह आपके लिए काम करता है:

td > input[type='text'] 
{ 
    display:block; /*this will make the text box fill the horizontal space of the its container td*/ 
} 

:

td > input[type='text'] 
{ 
    width: 100%; /*this will set the width of the textbox equal to its container td*/ 
} 

इस कोशिश

Answer 4

अपने क्षेत्र की चौड़ाई को 100% पर सेट करना चाहिए। इस मामले में आप तालिका सेल पैडिंग को अनदेखा करने से इनपुट फ़ील्ड से बचने के लिए box-sizing नियम भी जोड़ना चाहेंगे।

td.value input { 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

उदाहरण http://jsfiddle.net/MEARG/

Answer 5

सेटिंग सीएसएस नियम width:100%; और display:block;INPUT तत्व यह है कि क्या करना चाहिए के लिए देखें।

अभ्यास में, यह पर्याप्त नहीं है, ऐसा लगता है कि कुछ ब्राउज़र INPUT के size शैली पर attibute पर जोर देते हैं। तो उदाहरण के लिए, क्रोम आकार के साथ सहमत होने के लिए तत्व को बढ़ाता है, इस प्रकार तालिका कॉलम को चौड़ा करता है। size=0 सेट करना काम नहीं करता है, क्योंकि यह तब कुछ मान्य मान के लिए डिफ़ॉल्ट है। हालांकि, INPUT तत्व पर size=1 विशेषता सेटिंग वांछित व्यवहार को प्राप्त करती है। हालांकि, यह कोई सीएसएस-केवल समाधान नहीं है, और INPUT को एक निश्चित लेकिन छोटी चौड़ाई के नीचे संपीड़ित नहीं किया जा सकता है।