कृपया टेबल हेडिंग्स को sticky बनाइए

कृपया टेबल हेडिंग्स को sticky बनाइए

• वेब पर अक्सर बड़े data sets या table layouts देखने को मिलते हैं.
• सैकड़ों rows वाली table में scroll शुरू करते ही समस्या आती है.
• जब table header गायब हो जाता है, तो users के लिए यह याद रखना मुश्किल हो जाता है कि हर column किससे संबंधित है.

fixed header

• fixed header जादू जैसा लगता है, लेकिन इसे implement करना बहुत आसान है.
• बस thead में दो CSS properties जोड़नी होती हैं:
  • position: sticky;
  • top: 0;
• लगभग 96% global support के साथ, sticky कई browsers में भरोसेमंद तरीके से supported है.
• यह user experience बेहतर बनाने में भी मदद करता है.

GN⁺ की राय

• वेबसाइट पर बड़ी tables के साथ काम करते समय, user scroll नीचे करने पर भी table की heading आसानी से देख सके, यह user experience को काफी बेहतर बनाता है.
• CSS की position: sticky; property का उपयोग करके table header को आसानी से fixed किया जा सकता है, यह web developers के लिए उपयोगी जानकारी है.
• यह feature व्यापक रूप से supported है, इसलिए web developers जान सकते हैं कि वे इसे अलग-अलग browsers में स्थिर रूप से implement कर सकते हैं.

[GN⁺]

Hacker News की राय

• एक axis पर sticky headers संभव हैं, लेकिन CSS में दोनों axis पर support मिलने का इंतज़ार है: GitHub issue लिंक
• CSS की जानकारी लगभग न के बराबर होने के बावजूद functional web app बनाता रहा हूँ। हाल ही में 20,000 से ज़्यादा rows वाली table पर fixed header लगाने की कोशिश की, लेकिन Bootstrap classes, Stack Overflow, GPT और CodePen के सुझाव आज़माने पर अजीब side effects आए। लेकिन इस पोस्ट के CodePen से 2 मिनट में समस्या हल हो गई और इसे production में लागू कर दिया। आभार व्यक्त करता हूँ.
• position: sticky; का इस्तेमाल करके table header को fixed करना आसान लग सकता है, लेकिन table content पर कुछ काम करते ही समस्याएँ आती हैं। उदाहरण के लिए, एक feature जोड़ा था जिसमें user table को scroll करके page छोड़ दे और वापस आने पर scroll position restore हो जाए, लेकिन restore की गई position हमेशा एक पंक्ति नीचे खिसक जाती थी। पारदर्शी table header के आर-पार देखने पर इच्छित row सबसे ऊपर होती थी, लेकिन header के overlap होने से अगली row पहली दिखाई देती थी। Header height को ध्यान में रखकर scroll position adjust करने पर शुरुआत में ठीक चलता था, लेकिन कभी-कभी कुछ pixels का mismatch रह जाता था। वजह यह थी कि table बड़ी है, इसलिए scroll events के हिसाब से lazy loading हो रही थी, और auto table layout इस्तेमाल हो रहा था, जिससे कभी-कभी header cells बहुत संकरे हो जाते थे, शब्द wrap हो जाते थे और पूरी header height बढ़ जाती थी। अंतिम समाधान यह था कि header element पर ResizeObserver बनाया जाए ताकि height बदलने पर scroll position को dynamically adjust किया जा सके। ResizeObserver दस्तावेज़
• अगर आप table header की border भी fixed रखना चाहते हैं, तो यह CSS code इस्तेमाल कर सकते हैं:

  table thead:before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    border-top: 2px solid;
  }
  
  table thead:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 1px solid;
  }
  

• अच्छा होता अगर table headers अपने-आप fixed हो जाते। अगर developers <th> tags इस्तेमाल करने का अतिरिक्त काम कर रहे हैं, तो बहुत संभव है कि वे यही behavior चाहते हों.
• command line में headers को standard error (stderr) पर और body को standard output (stdout) पर भेजना बेहतर है। नहीं तो sort करते समय headers भी result में मिल सकते हैं.
• Chrome ने पहले position: sticky property को <thead> और <tr> elements पर इस्तेमाल करने की अनुमति नहीं दी थी: Chromium issue लिंक
• fixed header की जगह सीमित viewport height इस्तेमाल करने का सुझाव दिया गया, ताकि header हमेशा दिखाई दे। उदाहरण के लिए DataGridXL ऐसा करता है: DataGridXL लिंक (यह भी बताया गया कि इसे commenter ने बनाया है)
• CodePen example में अगर top को border को ध्यान में रखकर सेट किया जाए (जैसे -1px की जगह 0), तो table body को header के ऊपर बहने से रोका जा सकता है। दो CodePen examples की तुलना की गई: मूल CodePen और सुधारा हुआ CodePen
• कुछ लोग कहना चाहते हैं: "कृपया ऐसा मत कीजिए": Hacker News चर्चा लिंक