सीएसएस केवल - फिक्स्ड हेडर के साथ तालिका ओवरफ्लो

Question

मैं एक टेबल बनाने की कोशिश कर रहा हूं जो एक्स और वाई दिशाओं में स्क्रॉल करने योग्य है यदि सामग्री कंटेनर से बड़ी है। मैं यह भी चाहता हूं कि हेडर हमेशा शीर्ष पर दिखाई दे। मुझे पहला भाग मिल गया है, और हेडर हमेशा शीर्ष पर दिखाई देता है, हालांकि हेडर कॉलम आकार तालिका तालिका आकारों से मेल नहीं खाते हैं।

http://jsfiddle.net/xxQQS/1/

मैं एक सीएसएस एकमात्र समाधान के बाद हूँ:

मैं इस बेला बना लिया है।

संपादित करें: ऐसा लगता है कि बहुत से लोग ऐसा सोचते हैं कि यह केवल सीएसएस के साथ नहीं किया जा सकता है। यह सच हो सकता है, हालांकि कृपया यह कहने के लिए पोस्ट न करें 'नहीं, यह नहीं किया जा सकता'। यदि आप समझा सकते हैं कि यह सीएसएस के बिना क्यों नहीं किया जा सकता है, तो मैं आपका जवाब स्वीकार करूंगा।

Answer 1

अपनी तालिका का एक क्लोन बनाएं। पहली तालिका के लिए, visibility: hidden का उपयोग कर हेडर को छोड़कर सभी पंक्तियों को छुपाएं। visibility: hidden का उपयोग कर अन्य तालिका के शीर्षलेख को छुपाएं। अपनी तालिकाओं को ओवरफ्लो गुणों के साथ divs के अंदर रखें:

<div style="overflow-x: hidden; width: 400px;"> 
    <div style="overflow-y: hidden; height: 20px;"> 
     <table id="head-only"> 
     </table> 
    </div> 
    <div style="overflow-y: scroll; height: 100px;"> 
     <table id="body-only"> 
     </table> 
    </div> 
</div> 

Answer 2

इसके लिए आपको जेएस का उपयोग करना होगा। यह http://www.tablefixedheader.com/