कृपया टेबल के शीर्षक स्थिर करें

• जिन टेबल में बहुत सारी पंक्तियाँ होती हैं, उनमें स्क्रॉल करते-करते कॉलम का मतलब भूलना आसान हो जाता है, जिससे डेटा पढ़ना असुविधाजनक हो जाता है
• thead में सिर्फ position: sticky; और top: 0; जोड़ने से हेडर को स्थिर किया जा सकता है
• sticky को दुनिया भर में लगभग 96% ब्राउज़र सपोर्ट मिलता है, इसलिए यह किसी प्रयोगात्मक फीचर जैसा नहीं है
• 300वें आइटम जैसी नीचे की पंक्तियाँ देखते समय भी कॉलम शीर्षक दिखते रहते हैं, जिससे टेबल नेविगेशन अनुभव बेहतर होता है
• इम्प्लिमेंटेशन छोटा है लेकिन असर बड़ा है, इसलिए लंबी टेबल देने वाले वेबपेजों में इसे बेसिक usability सुधार के रूप में अपनाया जा सकता है

---

लंबी टेबल में हेडर गायब होने की समस्या

• बड़े dataset या सैकड़ों पंक्तियों वाली टेबल में स्क्रॉल करने के बाद टेबल हेडर स्क्रीन से बाहर चला जाता है
• 300वें आइटम तक नीचे जाने पर हर कॉलम का डेटा क्या दर्शाता है, यह दोबारा समझना मुश्किल हो सकता है
• टेबल जितनी नई या अपरिचित हो, उतना ही कॉलम के अर्थ याद रखकर पढ़ना पड़ता है, जिससे नेविगेशन का बोझ बढ़ता है

thead पर sticky लागू करना

• समाधान यह है कि thead में दो CSS properties जोड़ी जाएँ

position: sticky;
top: 0;

• position: sticky और top: 0 को साथ में उपयोग करने पर स्क्रॉल के दौरान भी हेडर को स्क्रीन के शीर्ष पर स्थिर रखा जा सकता है
• sticky की वैश्विक सपोर्ट दर लगभग 96% है, इसलिए इसे कई ब्राउज़रों में इस्तेमाल किया जा सकता है
• वास्तविक व्यवहार CodePen उदाहरण में देखा जा सकता है

[GN⁺]

Hacker News की राय

• एक axis पर sticky header ठीक है, लेकिन अभी भी उस दिन का इंतज़ार है जब CSS दोनों axis पर इसे सपोर्ट करेगा: https://github.com/w3c/csswg-drafts/issues/8286

  • एक कॉन्ट्रैक्ट काम में मुझे row और header दोनों को sticky बनाना पड़ा था, और वह सबसे मुश्किल कामों में से एक था अगर standard table होती तो आसान रहता, लेकिन यह generated CSS-as-JS इस्तेमाल करने वाली एक जटिल VueJS third-party dynamic table थी, इसलिए सिर्फ यह समझने में ही बहुत समय लग गया कि CSS और JS कहाँ से आ रहे हैं, और अंत में JS class functions और generated CSS को override करना पड़ा क्लाइंट से इतना समय लगने के लिए माफ़ी माँगनी पड़ी, और तब से Vue/React codebase में library चुनने को लेकर मैं बहुत ज़्यादा सावधान हो गया हूँ. Table तो HTML का basic element है, फिर एक साधारण काम के लिए JS class की तीन परतें और JSON से import की गई CSS क्यों चाहिए, समझ नहीं आता
  • शायद मैं उस original issue को 8 साल से देख रहा हूँ जिससे यह issue निकला था, और CSS spec की यह सबसे झुंझलाने वाली बातों में से एक है कभी-कभी बहुत बड़े data table की ज़रूरत होती है, और आप top को sticky रखते हुए overflow-x: auto भी चाहते हैं, लेकिन आपको कहा जाता है कि इनमें से सिर्फ एक चुनो

• सच कहूँ तो CSS का ज्ञान लगभग न के बराबर होने पर भी मैं किसी तरह कामचलाऊ web app बना लेता हूँ. हाल ही में मैंने लगभग 20,000 rows वाली एक राक्षसी table में header को sticky करने की कोशिश की: https://www.datasciencemeta.com/rpackages शुरू में लगा कि Bootstrap table classes में class="table table-header-sticky" जैसा कुछ होगा, लेकिन ऐसा नहीं था, और Stack Overflow, GPT, CodePen की सलाहों के साथ 20 मिनट छेड़छाड़ करने पर भी अजीब side effects आते रहे लेकिन इस पोस्ट के CodePen से यह 2 मिनट में चल गया, और मैं अभी इसे production में deploy कर रहा हूँ

• Table header को sticky करना position: sticky; से आसान लगता है, लेकिन table content में कुछ भी extra जोड़ते ही मामला जटिल हो जाता है मैंने sticky header वाली table में यह feature जोड़ा कि user body को scroll करके page छोड़ दे तो पहली दिख रही row का index save हो जाए और वापस आने पर restore हो जाए, लेकिन वह हमेशा लगभग एक row नीचे restore होती थी. बाद में पता चला कि row 5 वास्तव में table के सबसे ऊपर थी, लेकिन thead उसके ऊपर overlap कर रहा था, इसलिए row 6 पहली row जैसी दिख रही थी इसलिए मैंने thead की height को ध्यान में रखकर scroll position adjust की, लेकिन कभी-कभी कुछ pixels का फर्क रह जाता था, और table बड़ी होने की वजह से scroll events पर lazy loading भी थी, साथ ही default auto table layout इस्तेमाल हो रहा था, इसलिए header cells में line wrap होने से पूरी header height बदल जाती थी. अंत में मैंने thead पर ResizeObserver लगाया ताकि height बदलने पर scroll position dynamically adjust हो सके [1] https://developer.mozilla.org/en-US/docs/Web/API/ResizeObser...

  • https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-marg...
  • या फिर pagination table इस्तेमाल कर लें. यह समस्या infinite scroll page की वजह से पैदा हुई लगती है

• इसे implement करते समय अगर आप चाहते हैं कि header की borders भी sticky रहें, तो table thead:before और table thead:after पर position: absolute, width: 100%, top: 0/bottom: 0, border-top/border-bottom देकर यह किया जा सकता है

• अच्छा होता अगर table header अपने-आप ऐसे काम करता. अगर developer ने संबंधित tags का इस्तेमाल करके extra काम किया है, तो अक्सर वही behavior उसकी मंशा होती है

  • कोई browser plugin install कर लीजिए जो हर page पर custom stylesheet load कर सके लेकिन आजकल ऐसी sites बढ़ रही हैं जो की जगह 500 बार और हर के अंदर 45 स्तर nested लगाकर table बनाती हैं, तो वहाँ शायद यह काम न करे
  • ऐसे बदलावों से किसी अनपेक्षित तरीके से कुछ टूटने की संभावना बहुत ज़्यादा लगती है मुख्य वजह शायद यह है कि CSS Grid आने से पहले बहुत-सी websites tables का इस्तेमाल grid layout के लिए करती थीं. Header sticky हो जाए तो ऐसे layouts टूट सकते हैं HTML semantics की बड़ी विफलताओं में से एक यह है कि tables को “tabular data दिखाने का तरीका” नहीं बल्कि “मनमाने elements का grid” मान लिया गया

• command line में header को stderr पर और body को stdout पर भेज दें ऐसा नहीं करेंगे तो heights | sort -k2 -nr का result George 186, Wally 173, NAME HEIGHT होगा, लेकिन अगर header stdout को bypass करे तो result NAME HEIGHT, George 186, Wally 173 होगा

  • heights | (sed -u 1q; sort -k2 -nr) ठीक से काम करता है स्रोत: https://stackoverflow.com/a/56151840
  • अगर file में लिखना हो तो कुछ और कोशिशें करनी पड़ेंगी और shell की समझ भी ज़्यादा चाहिए होगी यह in-band text-only model की लगातार बनी रहने वाली सीमा है, लेकिन STDERR का इस तरह misuse करना मदद से ज़्यादा भ्रम पैदा करेगा अगर heights एक file है, तो % head -1 heights ; sed 1,1d heights | sort -k2 -nr जैसा कर सकते हैं, और अगर heights कोई ऐसा executable है जिसे दो बार चलाना महँगा पड़ता है, तो % heights > /tmp/heights ; head -1 /tmp/heights ; sed 1,1d /tmp/heights | sort -k2 -nr जैसा कर सकते हैं. awk की pipe भी इस्तेमाल की जा सकती है दूसरे विकल्प कम सुविधाजनक हैं, लेकिन कम चौंकाने वाले हैं, और executable लिखने वाले की अलग सोच होने पर भी काम करेंगे
  • यहाँ क्या बेहतर है? header को stderr पर भेजना, या सिर्फ तब header print करना जब stdout TTY हो?

• यह काफ़ी समय तक काम नहीं करता था. Chrome पहले thead और tr elements पर position: sticky को disable करता था: https://issues.chromium.org/issues/41303743 browser support table लगभग पूरी हरी दिखती थी, लेकिन याद है कि Chrome की tables में यह वास्तव में काम नहीं करता था

  • अब इसका इतना सरल हो जाना हैरान करता है. पहले जब इसकी ज़रूरत थी, तब इसे हर browser में चलाने के लिए HTML और CSS में तरह-तरह की जुगाड़ें डालनी पड़ती थीं फिर भी बहुत हैरानी नहीं हुई, क्योंकि web development अक्सर ऐसा ही होता है

• कुछ लोग तो बल्कि कहना चाहेंगे, “कृपया ऐसा मत कीजिए”: https://news.ycombinator.com/item?id=32998091

  • सामान्य web page के लिए मैं पूरी तरह सहमत हूँ. Stylus styles लिखने से तेज़ होने की वजह से मैं अक्सर uBlock Origin से sticky elements हटा देता हूँ, और site-wide generic styles भी काफ़ी अच्छे से काम करती रही हैं लेकिन मूल पोस्ट sticky header column वाले data tables की बात कर रही है, इसलिए यह सुझाव वास्तव में काफ़ी उपयोगी है
  • वह पूरे web page के sticky header की बात है. Tables में मामला बिल्कुल अलग है करीब दर्जन भर numeric columns वाली table देखते हुए थोड़ा-सा नीचे scroll करते ही क्या क्या है यह भूल जाना सच में बहुत बुरा लगता है
  • sticky property में बुरा क्या है?

• CodePen में अगर top को border जितना offset कर दें तो और बेहतर दिखता है. उदाहरण के लिए 0 की जगह -1px रखने से table body header के ऊपर से झलकती नहीं है तुलना: https://codepen.io/bradleytaunt/pen/bGZyJBj संशोधित संस्करण: https://codepen.io/alokmenghrajani/pen/ExMBQow

• sticky header की जगह सीमित viewport height इस्तेमाल करने का सुझाव दिया गया ताकि header हमेशा दिखता रहे DataGridXL(https://datagridxl.com) की तरह यह किया जा सकता है. वैसे, यह मैंने बनाया है

  • बस एक विचार है, लेकिन pointing device के बिना, जैसे केवल keyboard से, इस तरह navigate करना बहुत कठिन होगा
  • आलोचना के तौर पर नहीं कह रहा, लेकिन mobile पर मुझे यह तरीका कभी पसंद नहीं आया. मेरा मानना है कि content को page के साथ scroll होना चाहिए