टेबल कॉलम पर नकली न्यूनतम चौड़ाई

टेबल कॉलम पर नकली न्यूनतम चौड़ाई

टाइम स्टैम्प: 10 जनवरी, 2023 सुबह 10:11 बजे
एक टेबल कॉलम प्लेटोब्लॉकचेन डेटा इंटेलिजेंस पर न्यूनतम चौड़ाई बनाना। लंबवत खोज. ऐ.

अच्छा ओल ' <table> सारणीबद्ध डेटा दिखाने के लिए टैग सबसे सिमेंटिक HTML है। लेकिन मुझे यह नियंत्रित करना बहुत कठिन लगता है कि तालिका कैसे प्रस्तुत की जाती है, विशेष रूप से एक गतिशील वातावरण में स्तंभ की चौड़ाई जहां आप नहीं जानते होंगे कि प्रत्येक तालिका कक्ष में कितनी सामग्री जा रही है। कुछ मामलों में, एक कॉलम सुपर वाइड होता है जबकि अन्य को ऊपर की ओर खंगाला जाता है। दूसरी बार, हमें समान चौड़ाई मिलती है, लेकिन एक कॉलम की कीमत पर जिसमें अधिक सामग्री होती है और अधिक स्थान की आवश्यकता होती है।

लेकिन मुझे एक सीएसएस ट्रिक्स-वाई वर्कअराउंड मिला जो चीजों को थोड़ा आसान बनाने में मदद करता है। इस पोस्ट में मैं आपको यही दिखाना चाहता हूं।

समस्या

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

  • auto (डिफ़ॉल्ट)
  • fixed

आइए तालिका के स्तंभों पर किसी भी चौड़ाई को परिभाषित किए बिना प्रारंभ करें। दूसरे शब्दों में, हम ब्राउज़र को यह तय करने देंगे कि आवेदन करके प्रत्येक कॉलम को कितनी चौड़ाई देनी है table-layout: auto उस पर सीएसएस में। जैसा कि आप देखेंगे, ब्राउजर एल्गोरिथम के साथ अपना सर्वश्रेष्ठ करता है, इसे प्रत्येक कॉलम के बीच पूरी उपलब्ध चौड़ाई को विभाजित करना होता है।

अगर हम एक ऑटो टेबल लेआउट को स्वैप करते हैं table-layout: fixed, तब ब्राउज़र केवल उपलब्ध कुल स्थान को स्तंभों की कुल संख्या से विभाजित करेगा, फिर उस मान को प्रत्येक स्तंभ की चौड़ाई के रूप में लागू करेगा:

लेकिन क्या होगा अगर हम अपने कॉलम की चौड़ाई को नियंत्रित करना चाहते हैं? हमारे पास है <colgroup> तत्व मदद करने के लिए! इसमें व्यक्तिगत शामिल हैं <col> तत्व जिनका उपयोग हम प्रत्येक कॉलम के लिए आवश्यक सटीक चौड़ाई निर्दिष्ट करने के लिए कर सकते हैं। आइए देखें कि यह कैसे काम करता है table-layout: auto:

मैंने चित्रण के लिए शैलियों को रेखांकित किया है।

ब्राउजर इनलाइन चौड़ाई का सम्मान नहीं कर रहा है क्योंकि जोड़े जाने पर वे उपलब्ध टेबल स्पेस की मात्रा से अधिक हो जाते हैं। नतीजतन, तालिका स्तंभों से स्थान चुरा लेती है ताकि सभी स्तंभ दिखाई दे सकें। यह बिल्कुल ठीक डिफ़ॉल्ट व्यवहार है।

कैसे करता है <colgroup> के साथ काम table-layout: fixed. चलो पता करते हैं:

ये बिल्कुल अच्छा नहीं लगता। बाकी कॉलम के लिए एक निश्चित चौड़ाई बनाए रखते हुए हमें थोड़ा फ्लेक्स करने के लिए सामग्री के एक समूह के साथ कॉलम की आवश्यकता होती है। निश्चित table-layout मूल्य चौड़ाई का सम्मान करता है - लेकिन इतना अधिक कि यह उस स्तंभ के स्थान को खा जाता है जिसे सबसे अधिक स्थान की आवश्यकता होती है ... जो हमारे लिए नहीं है।

इसे आसानी से हल किया जा सकता है अगर हम केवल एक सेट कर सकें min-width ए के बजाय कॉलम पर width. इस तरह, कॉलम कहेगा, "जब तक हम इस न्यूनतम मूल्य तक नहीं पहुंच जाते, तब तक मैं आप सभी को अपनी चौड़ाई में से कुछ दे सकता हूं।" तब तालिका बस अपने कंटेनर को ओवरफ्लो कर देगी और शेष तालिका को प्रदर्शित करने के लिए उपयोगकर्ता को एक क्षैतिज स्क्रॉल देगी। लेकिन दुर्भाग्य से, min-width तालिका के स्तंभों का सम्मान नहीं किया जाता है <col> तत्व।

समाधान

समाधान नकली ए है min-width और हमें इसे करने के लिए थोड़ा रचनात्मक होना चाहिए।

हम एक खाली जोड़ सकते हैं <col> हमारे लिए दूसरे कॉलम के रूप में <colgroup> HTML में और लागू करें colspan विशेषता पहले कॉलम पर ताकि पहला कॉलम दोनों कॉलम के लिए जगह ले ले:


<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

ध्यान दें कि मैंने पिछले उदाहरण से इनलाइन शैलियों के स्थान पर कक्षाएं जोड़ी हैं। वही विचार अभी भी लागू होता है: हम प्रत्येक कॉलम में चौड़ाई लागू कर रहे हैं।

चाल यह है कि पहले के बीच संबंध <col> और खाली दूसरा <col>. यदि हम पहले पर चौड़ाई लागू करते हैं <col> (आईटी इस 200px ऊपर दिए गए स्निपेट में), तो दूसरा कॉलम खा लिया जाएगा जब फिक्स्ड टेबल लेआउट उपलब्ध स्थान को कॉलम में वितरित करने के लिए विभाजित करता है। लेकिन पहले स्तंभ की चौड़ाई (200px) का सम्मान किया जाता है और जगह पर बना रहता है।

देखा! हमारे पास एक नकली है min-width एक टेबल सेल पर सेट करें। उपलब्ध स्थान में परिवर्तन के रूप में पहला सेल फ्लेक्स करता है और क्षैतिज स्क्रॉलिंग के लिए टेबल ओवरफ्लो होता है जैसा कि हमने आशा की थी।

(मैंने थोड़ा जोड़ा चिपचिपा स्थिति वहां पहले कॉलम में।)

अभिगम्यता

आइए यहां पहुंच के बारे में पूरी तरह से न भूलें। मैंने Windows पर NVDA और macOS पर VoiceOver के माध्यम से तालिका चलाई और पाया कि सभी पाँच स्तंभों की घोषणा की गई है, भले ही हम उनमें से केवल चार का उपयोग कर रहे हों। और जब पहला कॉलम फोकस में होता है, तो यह "कॉलम एक से दो" की घोषणा करता है। पूरी तरह से सुरुचिपूर्ण नहीं है लेकिन किसी को खोने का कारण भी नहीं बनने वाला है। मुझे लगता है कि हम एक फेंक सकते हैं aria-hidden अप्रयुक्त कॉलम पर विशेषता, लेकिन यह भी जान लें कि ARIA खराब HTML का विकल्प नहीं है।

मैं मानता हूँ, यह थोड़ा सा लगता है, उम, हैकी। लेकिन यह काम करता है! मुझे बताएं कि क्या आपके पास टिप्पणियों में कोई अलग दृष्टिकोण है... या किसी भी भ्रम के बारे में जानते हैं जो यह "हैक" हमारे उपयोगकर्ताओं के लिए ला सकता है।

समय टिकट:

से अधिक सीएसएस ट्रिक्स