Sunday, 15 August 2010

css - how to make a 100% width, 100% height large table inside a display table cell div scroll instead of the whole page -


मेरे पास एक पेज लेआउट है:

  & lt; div class = "layoutTable" & gt; & Lt; div वर्ग = "लेआउटटेबलरो शीर्षलेख" & gt; & Lt; div class = "लेआउटटेबलसीएल हैडर" & gt; & Lt; h1 class = "इंटरफ़ेसनाम" & gt; आइटम & lt; / h1 & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; div वर्ग = "लेआउटटेबलआरओ मेन" & gt; & Lt; div वर्ग = "लेआउटटेबलसीएल" & gt; & Lt; div class = "gridTableWrapper" & gt; & Lt;! - यहां एक बड़ी आंतरिक तालिका यहां - & gt; & Lt; / div & gt; & lt;! - ग्रिडटेबलवेपर - & gt; & Lt; / div & gt; & lt;! - लेआउटटेबलसेल - & gt; & Lt; / div & gt; & lt;! - लेआउटटेबलरो - & gt; & Lt; div वर्ग = "लेआउटटेबलरो पाद" & gt; & Lt; div वर्ग = "लेआउटटेबलसील पाद लेख" & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt;   

हैडर और पाद लेख पंक्तियों की एक निश्चित ऊंचाई 49px है, और मध्य खंड, प्रदर्शन किया जा रहा है: तालिका-सेल, शेष स्थान भरता है। यह हिस्सा ठीक काम करता है, जब तक आप लेआउट "तालिका" divs के अंदर डेटा तालिका नहीं जोड़ते हैं।

क्या होना चाहिए, हालांकि लेआउट तालिका का बड़ा कक्ष है, उस आकार को रखना चाहिए, और डेटा तालिका , बहुत बड़े होने पर, स्क्रॉल सलाखों को भीतर लेआउट तालिका का सेल स्क्रॉल करना चाहिए।

इसके बजाय, मैं जो भी कोशिश करता हूं, ब्राउज़र लेआउट तालिका को उड़ाने पर जोर देता है संपूर्ण डेटा तालिका सेल में फिट हो सकती है। नतीजा यह होता है कि स्क्रॉल सलाखों को पूरे पृष्ठ पर लागू किया जाता है, तालिका के बजाय तालिका के लिए।

मैं इसे पिक्सल में चौड़ाई निर्दिष्ट करके पूरा कर सकता हूं, लेकिन इसका लक्ष्य द्रव लेआउट ।

मैं इसे कैसे बनाऊं, तो सेल को जो स्क्रॉल किया जाता है, इसलिए पाद लेख और हैडर सभी समय पर दिखाई दे रहे हैं और बाएं-दायां स्क्रॉल पृष्ठ स्तर की बजाय लेआउट सेल स्तर पर भी है?

मैंने यहां समस्या का एक बेला बनाया है:

अगर

  1. यह एक पूर्ण पृष्ठ लेआउट है,

  2. कि आपका हैडर कंटेनरों (थ्रेड लेकिन शीर्ष पर नहीं) से अधिक कुछ नहीं है < / Li>

  3. कि आपके पाद लेख कंटेनरों से अधिक कुछ नहीं है (नहीं पैट पर फ़ूटर)

  4. उस शीर्ष लेख और पाद लेख की ऊंचाई ज्ञात है,

    फिर आप किसी तालिका को एक पूर्ण कंटेनर में सेट कर सकते हैं <पूर्व> #tableContainer {स्थिति: पूर्ण; बाएं: 0; सही: 0; शीर्ष: 49px; नीचे: 49px; }

    यदि इन आंकड़ों को 2 डी में पढ़ने के लिए datas हैं, तो एक तालिका का उपयोग करें, अन्यथा एक मिश्रित सलाद ओ.टी. टैग है:)

No comments:

Post a Comment