सीएसएस और फिक्स्ड हेडर के साथ स्क्रॉल करने योग्य टेबल कैसे बनाएं

वेब विकास में, बड़ी मात्रा में डेटा के साथ टेबल बनाना अक्सर आवश्यक होता है स्क्रॉल करने की आवश्यकता है. हालाँकि, टेबल बॉडी को स्क्रॉल करते समय एक निश्चित हेडर बनाए रखना चुनौतीपूर्ण हो सकता है। यहां बताया गया है कि आप इस प्रभाव को कैसे प्राप्त कर सकते हैं:

HTML Structure

सबसे पहले, हमें यह सुनिश्चित करना होगा कि हमारी HTML संरचना सही है। हमारे पास एक स्क्रॉलबार के साथ एक बाहरी div है, एक आंतरिक div जिसमें तालिका है, और तालिका हेडर एक तत्व के भीतर और तालिका डेटा एक

 
CSS शैलियाँ
अब, हमें CSS का उपयोग करके तालिका को स्टाइल करने की आवश्यकता है:
/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}
अतिरिक्त विचार
सुनिश्चित करें कि उचित संरेखण के लिए सभी हेडर और डेटा सेल 
 तत्वों में शामिल हैं। यदि आप अलग-अलग कॉलम की चौड़ाई चाहते हैं, तो CSS में nth-child चयनकर्ता का उपयोग करें।
नोट: यह दृष्टिकोण छोटी तालिकाओं के लिए उपयुक्त है। बहुत बड़ी तालिकाओं के लिए, एक अलग तकनीक का उपयोग करने पर विचार करें, जैसे वर्चुअलाइजेशन या तृतीय-पक्ष लाइब्रेरी।