css - How can a <label> completely fill its parent <td>? -

यह प्रासंगिक कोड है (काम नहीं करता है):

  & lt; html & gt; & Lt; शीर्ष & gt; & Lt; शीर्षक & gt; टेस्टिंग चेक बॉक्स & lt; / title & gt; & Lt; शैली प्रकार = "टेक्स्ट / सीएसएस" & gt; टीडी {सीमा: 1 पीएक्स ठोस # 000; } लेबल {सीमा: 1 पीएक्स ठोस # एफ 00; चौड़ाई: 100%; ऊंचाई: 100%} & lt; / style & gt; & Lt; / head & gt; & LT; बॉडी & gt; & LT; तालिका & gt; & LT; टीआर & gt; & Lt; td & gt; कुछ स्तंभ शीर्षक & lt; / td & gt; & Lt; td & gt; एक और स्तंभ शीर्षक & lt; / td & gt; & Lt; / टीआर & gt; & LT; टीआर & gt; & Lt; td & gt; मूल्य 1 & lt; br & gt; (थोड़ी अधिक जानकारी) & lt; / td & gt; & Lt; td & gt; & lt; लेबल & gt; & lt; इनपुट प्रकार = "चेकबॉक्स" / & gt; & Amp; nbsp; & lt; / लेबल & gt; & lt; / टीडी & gt; & Lt; / टीआर & gt; & LT; टीआर & gt; & Lt; td & gt; मूल्य 2 & lt; / td & gt; & Lt; td & gt; & lt; इनपुट प्रकार = "चेकबॉक्स" / & gt; & lt; / td & gt; & Lt; / टीआर & gt; & Lt; / तालिका & gt; & Lt; / body & gt; & Lt; / html & gt;  

इसका कारण यह है कि मैं चेक बॉक्स को चेक / अनचेक करने के लिए टेबल सेल में कहीं भी एक क्लिक करना चाहता हूं।

संपादन: वैसे, कोई जावास्क्रिप्ट समाधान कृपया नहीं, पहुंच के कारण मैंने प्रदर्शन का उपयोग करने की कोशिश की: ब्लॉक; लेकिन यह केवल चौड़ाई के लिए काम करता है, ऊँचाई के लिए नहीं

मैंने केवल इसका परीक्षण 6 IE में किया है, 7, 8 और एफएफ 3.6.3।

  & lt; html & gt; & Lt; शीर्ष & gt; & Lt; शीर्षक & gt; टेस्टिंग चेक बॉक्स & lt; / title & gt; & Lt; शैली प्रकार = "टेक्स्ट / सीएसएस" & gt; Tr {ऊँचाई: 1px; } टीडी {सीमा: 1 पीएक्स ठोस # 000; ऊंचाई: 100%; } लेबल {प्रदर्शन: ब्लॉक; सीमा: 1 पीएक्स ठोस # एफ 00; न्यूनतम ऊंचाई: 100%; / * नवीनतम ब्राउज़र के लिए जो मिनि-ऊंचाई * / ऊँचाई का समर्थन करता है: ऑटो! महत्वपूर्ण; / * नए IE संस्करणों के लिए * / ऊंचाई: 100%; / * केवल ऊँचाई-संबंधित विशेषता है जो IE6 की उपेक्षा नहीं करता है * /} & lt; / style & gt; & Lt; / head & gt; & LT; बॉडी & gt; & LT; तालिका & gt; & LT; टीआर & gt; & Lt; td & gt; कुछ स्तंभ शीर्षक & lt; / td & gt; & Lt; td & gt; एक और स्तंभ शीर्षक & lt; / td & gt; & Lt; / टीआर & gt; & LT; टीआर & gt; & Lt; td & gt; मूल्य 1 & lt; br & gt; (थोड़ी अधिक जानकारी) & lt; / td & gt; & Lt; td & gt; & lt; लेबल & gt; & lt; इनपुट प्रकार = "चेकबॉक्स" / & gt; & Amp; nbsp; & lt; / लेबल & gt; & lt; / टीडी & gt; & Lt; / टीआर & gt; & Lt; / तालिका & gt; & Lt; / body & gt; & Lt; / html & gt;  

मुख्य चाल यहाँ पंक्तियों की ऊँचाई को परिभाषित करने के लिए है ताकि हम अपने बच्चों (कोशिकाओं) पर 100% ऊँचाई का उपयोग कर सकते हैं और बदले में, कोशिकाओं की एक 100% बच्चों (लेबल) इस तरह, सेल में कोई बात नहीं है, यह जबरन अपनी मूल पंक्ति का विस्तार करेगी, और उसके भाई कोशिकाओं का पालन करेंगे। चूंकि लेबल में उसके माता-पिता की 100% ऊँचाई है, जिसकी ऊंचाई निर्धारित है, यह भी खड़ी हो जाएगी।

दूसरी और अंतिम चाल (लेकिन उतनी ही महत्वपूर्ण) है कि सीएसएस हैक का उपयोग करने के लिए न्यूनतम -हाइट विशेषता, जैसा कि टिप्पणियों में बताया गया है।

आशा है कि यह मदद करता है!