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

Question

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

Comments

शायद बाद के max-heightबजाय उपयोग करें heightक्योंकि बाद की मेज तालिका की ऊँचाई के लिए मजबूर करेगी500px

— फ्रेड

आप शीर्ष लेख को स्क्रॉल से रखने के बारे में एक दूसरा प्रश्न पूछना चाहते हैं। ;)

— बिल बिंघम

यह भी देखें stackoverflow.com/questions/1587927/...

— एलेक्स नोलास्को

Answer 1

overflowCSS प्रॉपर्टी का उपयोग करके देखें । बस क्षैतिज अतिप्रवाह ( 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% चौड़ाई का कारण होगा, इसलिए यदि आप नहीं चाहते कि यह पृष्ठ की संपूर्ण क्षैतिज चौड़ाई को ले जाए, तो आपको तत्व के लिए एक स्पष्ट चौड़ाई भी निर्दिष्ट करनी होगी।

Comments

हालांकि यह ऊंचाई को सीमित नहीं करता है।

— फ्रेड

नहीं, यह करता है, आपको बस display:blockइसे div jsfiddle.net/TSGSA/1 की

— फ्रेड

@ फ़्रेड: महान दिमाग एक जैसा सोचते हैं। आपने टिप्पणी करते समय मैंने अपना उत्तर अपडेट किया। :)

— AgentConundrum

इस उत्तर ने वास्तव में मेरी मदद की, लेकिन इसे टेबल टैग पर लागू करने के बजाय, स्क्रॉल करते समय हेडर को स्थिर रहने की अनुमति देने के लिए, इसे tbody को किया जाना चाहिए। फिर स्क्रॉल पट्टी के ऊपर के क्षेत्र में क्षेत्र के संबंध में छाँटने के लिए कुछ स्टाइल है।

— डेविड

यदि आप tbody पर इसका उपयोग करने जा रहे हैं, तो सुनिश्चित करें कि आप प्रदर्शन को जोड़ते हैं: thead को ब्लॉक करें (और शायद tfoot) या वे थोड़ा पागल हो सकते हैं। ऐसा लगता है कि समस्या यह है कि एक बार ऐसा करने के बाद, आपने थ्रेड और tbody के बीच लिंक को तोड़ दिया है: पूर्व के कॉलम बाद की चौड़ाई से अवगत नहीं हैं। तो तुम पैच और नीचे फिसलन ढलान तुम जाओ। "मैं सुंदरता के लिए मर गया ..."

— Cuse70

Answer 2

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

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

Comments

यह उस जगह को बनाए रखने की अनुमति नहीं देगा, जबकि tbody स्क्रॉल करता है।

— डेविड

यह आवश्यकता मूल प्रश्न में नहीं है।

— डार्क फाल्कन

इसके अलावा, अन्य (स्वीकार किए जाते हैं) जवाब या तो जगह में जगह नहीं रखता है।

— ब्रॉक एडम्स

आप अभी भी कर सकते हैं इस विधि के साथ जगह में एक हेडर दिखाई देते हैं। आप तालिका के शीर्षलेख को छिपाते हैं, फिर पहली तालिका के ऊपर एक दूसरी तालिका बनाते हैं जिसमें शीर्ष लेख है। फिर, दोनों तालिकाओं के लिए display:table;अपनी पंक्तियाँ होने के लिए शैली display:table-row;और उनकी कोशिकाएँ हैं display:table-cell;और दो तालिकाओं का मिलान होगा और एक प्रतीत होगा। (नोट: यह बहुत बड़ी तालिकाओं के साथ काम नहीं करता है; मूल रूप से, यह उन्हें मेल खाता है जब यह कर सकता है। मैंने इस तकनीक का कई बार उपयोग किया है।)

— लेविनिन्जा

ज़रूर। माता-पिता का आकार सापेक्ष आकार का उपयोग करने के लिए निर्दिष्ट किया जाना चाहिए। उदाहरण के लिए: jsfiddle.net/hz8wy

— डार्क फाल्कन

Answer 3

तालिका की ऊंचाई निर्धारित करने के लिए, आपको पहले सीएसएस संपत्ति "प्रदर्शन: ब्लॉक" सेट करने की आवश्यकता है फिर आप "चौड़ाई / ऊंचाई" गुण जोड़ सकते हैं। मुझे यह मोज़िला आर्टिकल बहुत अच्छा संसाधन लगता है कि कैसे टेबल को स्टाइल करना सीखें: लिंक