सीएसएस का उपयोग करके एक जटिल तालिका कैसे बनाएं?

Question

हाल ही में मैं उदाहरण के लिए, एक जटिल तालिका कार्यान्वयन में भाग:

tr1: | td1 | td2 | td3 | 
tr2: | th | td | 
tr3: | th | td | 
... 

इस उदाहरण से पता चलता है, मैं TD1 चाहते हैं और td3 चौड़ाई तय कर रहे हैं, टीडी और TD2 विस्तार करने के लिए चौड़ाई ऑटो हैं जब स्क्रीन रेडियो/ब्राउज़र- चौड़ाई बदल गई मैं सोच रहा हूं कि सीएसएस का उपयोग करके ऐसा करने का कोई तरीका है या नहीं?

बस स्पष्ट होने के लिए, मैंने पहले से ही अपने उद्देश्य के लिए colspan और चौड़ाई मान का उपयोग किया है, लेकिन मैं colspan और चौड़ाई मान का उपयोग करके टीडी 1 से छोटे कैसे बना सकता हूं? colspan काम नहीं करता है, न तो चौड़ाई मान

Answer 1

यह colspans सही ढंग से स्थापित करने का एक सरल बात है।

तालिका शीर्षलेख पंक्ति: प्रत्येक कक्ष को 2 (3 कोशिकाएं * 2 colspan = 6 colspan-cells) का एक colspan मिलता है।
टेबल बॉडी पंक्तियां: प्रत्येक सेल को 3 (2 कोशिकाएं * 3 colspan = 6 colspan-cells) का एक colspan मिलता है।

अद्यतन

वहाँ कोई विसंगति जो कॉलम दोनों कॉल्सपन और चौड़ाई सेट होने शामिल हो रहा है। ब्राउज़र चौड़ाई मान और यहां तक ​​कि अधिकतम-चौड़ाई (न्यूनतम-चौड़ाई कार्य) को अनदेखा कर रहे हैं।

उदाहरण:

<table border="1" style="width: 50%;"> 
    <tr> 
     <td style="width: 100px;">td1</td> 
     <td colspan="2">td2</td> 
     <td style="width: 100px;">td3</td> 
    </tr> 
    <tr> 
     <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th> 
     <td colspan="2">td2</td> 
    </tr> 
    <tr> 
     <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th> 
     <td colspan="2">td2</td> 
    </tr> 
</table> 

यह मोटे तौर पर वांछित आउटपुट पैदा करता है लेकिन वें स्तंभ Th1 निम्नलिखित टीडी (TD2) का एक ही आकार के हिसाब से फैलता है। मेज तब तक 50% टेबल पर कब्जा करते हैं जब तक कि तालिका 240px से छोटी न हो, तब th1 120px पर रहता है।

यह मेरे लिए असंगत लगता है और मेरे पास कोई कामकाज नहीं है, सबसे अच्छा यह है कि यदि आप जांचते हैं कि क्या आप तालिका को अलग-अलग प्रदर्शित कर सकते हैं (यानी हेडर समेत सभी पंक्तियों में कॉलम की संख्या (जो कि कहीं भी अधिक समझ में आती है))।

Answer 2

यदि आप td के लिए चौड़ाई निर्दिष्ट नहीं करते हैं तो उनकी चौड़ाई स्वचालित रूप से इसकी सामग्री के अनुसार बढ़ जाएगी। इसके अलावा, आप colspan का उपयोग td को अपनी पसंद के अनुसार बराबर करने के लिए कर सकते हैं ...

Answer 3

उस सीमित उदाहरण से, ऐसा लगता है कि आपको दो टेबल की आवश्यकता है।

शीर्ष पंक्ति (स्पष्ट रूप से TD1, td3 की चौड़ाई निर्धारित करते हैं, और पूरे तालिका के लिए एक। TD2 ऑटो का विस्तार करते हैं।

और तालिका के आराम के लिए एक ... आप के रूप में यह प्रारूप कृपया, बस तालिका की चौड़ाई को शीर्ष पंक्ति के समान सेट करें ताकि एक तालिका की तरह दिखता हो। आपको शायद 0 मार्जिन/पैडिंग सेट करना होगा।

कि, या आप इसे एक टेबल बना सकते हैं और कुछ colspan कर सकते हैं हैकर।

Answer 4

कॉलम में सभी कक्ष समान चौड़ाई हैं। कई स्तंभों पर कोशिकाओं का विस्तार करने के लिए,का उपयोग करेंविशेषता। एक पंक्ति में सभी कोशिकाएं तालिका की पूरी चौड़ाई को भरने के लिए विस्तारित होंगी।

Answer 5

इन colspans का प्रयास करें:

tr1: | td1(1) | td2(2) | td3(1) | 
tr2: | td1(2) | td2(2)  | 
tr3: | td1(2) | td2(2)  | 
...