तालिका की ऊंचाई निर्दिष्ट करने के लिए कैसे करें जैसे एक लंबवत स्क्रॉल बार प्रकट होता है?

Question

मेरे पास मेरे पृष्ठ पर कई पंक्तियों वाली एक टेबल है। मैं तालिका की ऊंचाई निर्धारित करना चाहता हूं, 500px के लिए कहें, जैसे कि तालिका की ऊंचाई उस से बड़ी है, एक लंबवत स्क्रॉल बार दिखाई देगा। मैंने table पर सीएसएस height विशेषता का उपयोग करने की कोशिश की, लेकिन यह काम नहीं करता है।

Answer 1

overflow सीएसएस संपत्ति का उपयोग करने का प्रयास करें। क्षैतिज अतिप्रवाह (overflow-x) और लंबवत ओवरफ़्लो (overflow-y) के व्यवहार को परिभाषित करने के लिए अलग-अलग गुण भी हैं।

जब से तुम केवल लंबवत स्क्रॉल चाहते हैं, यह प्रयास करें:

table { 
    height: 500px; 
    overflow-y: scroll; 
} 

---

संपादित करें:

जाहिर <table> तत्वों overflow संपत्ति का सम्मान नहीं करते। ऐसा प्रतीत होता है क्योंकि <table> तत्वों को डिफ़ॉल्ट रूप से display: block के रूप में प्रस्तुत नहीं किया जाता है (वास्तव में उनका अपना प्रदर्शन प्रकार होता है)। आप overflow संपत्ति <table> तत्व की स्थापना द्वारा काम करने के लिए मजबूर एक ब्लॉक प्रकार होना कर सकते हैं:

table { 
    display: block; 
    height: 500px; 
    overflow-y: scroll; 
} 

ध्यान दें कि यह 100% चौड़ाई के लिए तत्व का कारण होगा, ताकि आप इसे लेने के लिए नहीं करना चाहते हैं पृष्ठ की पूरी क्षैतिज चौड़ाई, आपको तत्व के लिए एक स्पष्ट चौड़ाई निर्दिष्ट करने की आवश्यकता है।

Answer 2

आपको तालिका को किसी अन्य तत्व के अंदर लपेटने और उस तत्व की ऊंचाई सेट करने की आवश्यकता है। इनलाइन सीएसएस के साथ उदाहरण:

<div style="height: 500px; overflow: auto;"> 
<table> 
</table> 
</div>