दिलचस्प पोस्ट
एंड्रॉइड, मैं डिवाइस को घुमाए जाने पर गतिविधि को कैसे नष्ट नहीं कर सकता हूं? मैं सी # से एक फ़ाइल के गुण संवाद कैसे प्रदर्शित करूं? UIComponentBase को बढ़ाते समय राज्य को कैसे बचाया जाए दिए गए कोडबेस में परिवर्तन की विशिष्ट पहचान करने के लिए कितनी गिट शा की * आम तौर पर * आवश्यक है? मैं बास्श स्क्रिप्ट में स्क्रिप्ट फ़ाइल नाम कैसे जान सकता हूं? जावा सबलेट पर एचटीएमएल 5 फाइल अपलोड करें स्ट्रिंग क्लास के लिए Intellisense में वीएस 2008 एक्स्टेंशन मैनेजमेंट क्यों नहीं प्रदर्शित करता है? कैसे एंड्रॉइड में एक दृश्य के लिए छाया सेट करने के लिए? एसक्यूएल कैसे आरोही क्रमबद्ध करते समय शून्य मान बनाने के लिए आखिर में आते हैं एंड्रॉइड टूलबार केंद्र शीर्षक और कस्टम फ़ॉन्ट एक्लिप्स सीडीटी (जूनो / केप्लर / लुना) इंडेक्सर में सी ++ 11 सक्षम करें क्या JSF प्रबंधित बीन में एक नया धागा शुरू करना सुरक्षित है? PHPUnit जोर देकर कहा कि एक अपवाद फेंक दिया गया था? आइडिया को समझना एएसपी.नेट और वेब टूल्स 2015 (आरसी 1 अपडेट 1) के स्थापित होने के बाद विजुअल स्टूडियो 2015 त्रुटि "ऑब्जेक्ट रेफ़रलेंस ऑब्जेक्ट के एक उदाहरण के लिए सेट नहीं है"

क्षैतिज स्क्रॉलबार और ऊर्ध्वाधर स्क्रॉलबार पर स्थिर हेडर तालिका

मैं एचटीएमएल / सीएसएस चिपचिपा शीर्ष + स्क्रॉलबार के साथ इस समस्या को समझने की कोशिश कर रहा हूं। हम एक प्रोग्राम बना रहे हैं जिसके लिए स्क्रैबलर्स को दिखाने के लिए आवश्यक है कि कंटेनरसाइज एक निश्चित बिंदु तक पहुँच जाता है (उपयोगकर्ता के समाधान के आधार पर)।

मैं तालिका में दूसरे स्तंभ पर एक न्यूनतम-चौड़ाई को मजबूर कर रहा हूं, इसलिए तालिका निश्चित बिंदु पर कम हो जाती है और कंटेनर को एक निश्चित चौड़ाई में रहने के लिए मजबूर करती है। कंटेनर पर अतिप्रवाह क्षैतिज स्क्रॉलबार दिखाता है सब कुछ ठीक काम करता है एक बार जब मैं ऊर्ध्वाधर स्क्रॉलिंग के लिए एक दूसरा स्क्रॉलबार जोड़ता हूं, तो चीजें गड़बड़ हो रही हैं क्या किसी के पास इस समस्या का समाधान है? मुझे थर्मल-बॉडी पर एक ऊर्ध्वाधर स्क्रॉलबार होना है, लेकिन स्क्रॉलबार बाहरी कंटेनर पर दिखाई देना चाहिए।

क्या तय हैडर तालिकाओं के लिए एक अच्छा HTML / CSS समाधान है? मैं एक हफ्ते की खोज कर रहा था, लेकिन इस तरह के व्यवहार के लिए केवल jQuery प्लगिन ही मिल सकता है।

यह मेरा वर्तमान एचटीएमएल है:

<!DOCTYPE html> <html> <head> <title>fixed header prototyping</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="outer-container"> <!-- absolute positioned container --> <div class="inner-container"> <div class="table-header"> <table id="headertable" width="100%" cellpadding="0" cellspacing="0"> <thead> <tr> <th class="header-cell col1">One</th> <th class="header-cell col2">Two</th> <th class="header-cell col3">Three</th> <th class="header-cell col4">Four</th> <th class="header-cell col5">Five</th> </tr> </thead> </table> </div> <div class="table-body"> <table id="bodytable" width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> </tbody> </table> </div> </div> </div> </body> </html> 

और मेरी सीएसएस इस तरह दिखती है:

 body { margin:0; padding:0; height: 100%; width: 100%; } table { border-collapse: collapse; /* make simple 1px lines borders if border defined */ } tr { width: 100%; } .outer-container { background-color: #ccc; position: absolute; top:0; left: 0; right: 300px; bottom:40px; overflow: hidden; } .inner-container { width: 100%; height: 100%; position: relative; overflow-x: scroll; overflow-y:hidden; } .table-header { float:left; width: 100%; } .table-body { float:left; height: 100%; width: inherit; overflow-y: scroll; } .header-cell { background-color: yellow; text-align: left; height: 40px; } .body-cell { background-color: blue; text-align: left; } .col1, .col3, .col4, .col5 { width:120px; min-width: 120px; } .col2 { min-width: 300px; } 

JSFiddle उदाहरण – http://jsfiddle.net/W8URM/

अग्रिम धन्यवाद लोग!

वेब के समाधान से एकत्रित समाधान "क्षैतिज स्क्रॉलबार और ऊर्ध्वाधर स्क्रॉलबार पर स्थिर हेडर तालिका"

यह आसान नहीं है मैं एक स्क्रिप्ट समाधान के साथ आया हूँ (मुझे नहीं लगता कि यह शुद्ध सीएसएस का उपयोग किया जा सकता है)

एचटीएमएल उसी तरह रहता है जैसा आपने पोस्ट किया था, सीएसएस थोड़ा बदलता है, JQuery कोड जोड़ा गया है।

वर्किंग बेडल पर परीक्षण किया गया: IE10, IE9, IE8, एफएफ, क्रोम

बीटीडब्ल्यू: यदि आपके पास अद्वितीय तत्व हैं, तो आप वर्गों के बजाय आईडी का उपयोग क्यों नहीं करते हैं? मुझे लगता है कि यह बेहतर चयनकर्ता प्रदर्शन देता है।

यह कैसे काम करता है की व्याख्या : inner-container outer-container (इसलिए मूल रूप से, वह जरूरत नहीं है) की पूरी जगह का विस्तार होगा, लेकिन मैं उसे वहाँ छोड़ दिया है, तो आप आप डोम बदलने की आवश्यकता अभ्यस्त।

table-header एक स्क्रॉल ( overflow: hidden ) के बिना, अपेक्षाकृत तैनात है, हम बाद में अपनी स्क्रॉल को संभाल लेंगे।

table-body को बाकी की inner-container ऊंचाई पर जाना होगा, इसलिए मैंने उसे तय करने के लिए एक ऊंचाई का उपयोग करने के लिए एक स्क्रिप्ट का उपयोग किया। (जब आप विंडो को फिर से आकार में बदलते हैं, तो यह गतिशील रूप से बदलता है), बिना स्क्रॉल अभ्यस्त दिखाई देता है, क्योंकि डिव बहुत बढ़ेगा .. नोटिस कि यह भाग स्क्रिप्ट के बिना किया जा सकता है, अगर आप शीर्ष ऊंचाई की ऊंचाई तय करते हैं और उपयोग करते हैं CSS3 (जैसा कि उत्तर के अंत में दिखाया गया है)

अब जब हम स्क्रॉल करते हैं तो हर बार शरीर के साथ हेडर को ले जाने का मामला होता है यह scroll इवेंट के लिए निर्दिष्ट फ़ंक्शन द्वारा किया जाता है।

सीएसएस (इनमें से कुछ आपकी शैली से कॉपी किया गया था)

 * { padding: 0; margin: 0; } body { height: 100%; width: 100%; } table { border-collapse: collapse; /* make simple 1px lines borders if border defined */ } .outer-container { background-color: #ccc; position: absolute; top:0; left: 0; right: 300px; bottom: 40px; } .inner-container { height: 100%; overflow: hidden; } .table-header { position: relative; } .table-body { overflow: auto; } .header-cell { background-color: yellow; text-align: left; height: 40px; } .body-cell { background-color: blue; text-align: left; } .col1, .col3, .col4, .col5 { width:120px; min-width: 120px; } .col2 { min-width: 300px; } 

JQuery

 $(document).ready(function () { setTableBody(); $(window).resize(setTableBody); $(".table-body").scroll(function () { $(".table-header").offset({ left: -1*this.scrollLeft }); }); }); function setTableBody() { $(".table-body").height($(".inner-container").height() - $(".table-header").height()); } 

यदि आप हेडर की ऊँचाई तय करने की परवाह नहीं करते हैं (मैंने देखा कि आपने अपने सीएसएस में सेल की ऊंचाई तय की है), तो आप कुछ भी स्क्रिप्ट छोड़ सकते हैं यदि आप CSS3 का प्रयोग करते हैं: शॉर्ट फिडल (यह IE8 पर काम नहीं करेगा)

यह एक समाधान है जो फिर से एक सीएसएस ही समाधान नहीं है । यह avrahamcool के समाधान के समान है, क्योंकि यह jQuery की कुछ पंक्तियों का उपयोग करता है, लेकिन ऊंचाइयों को बदलना और शीर्षलेख को स्थानांतरित करने के बजाय, यह सभी के आधार पर tbody है कि उसके पैरेंट table को कितनी दूर तक स्क्रॉल किया जाता है सही।

इस समाधान के साथ एक अतिरिक्त बोनस यह है कि यह एक अर्थपूर्ण मान्य HTML तालिका के साथ काम करता है

यह सभी हाल के ब्राउज़र संस्करणों (आईई 10, क्रोम, एफएफ) पर बहुत अच्छा काम करता है और यही है, पुराने संस्करणों पर स्क्रॉलिंग कार्यक्षमता टूट जाती है

लेकिन फिर यह तथ्य कि आप एक अर्थपूर्ण मान्य HTML तालिका का उपयोग कर रहे हैं, वह दिन को बचाएगा और सुनिश्चित करें कि तालिका अभी भी ठीक से प्रदर्शित की गई है, यह केवल स्क्रॉलिंग कार्यक्षमता है जो पुराने ब्राउज़रों पर काम नहीं करेगा।

प्रदर्शन प्रयोजनों के लिए यहां एक जेएसफ़ील्ड है

सीएसएस

 table { width: 300px; overflow-x: scroll; display: block; } thead, tbody { display: block; } tbody { overflow-y: scroll; overflow-x: hidden; height: 140px; } td, th { min-width: 100px; } 

जे एस

 $("table").on("scroll", function () { $("table > *").width($("table").width() + $("table").scrollLeft()); }); 

मुझे एक ऐसा संस्करण चाहिए जो आईई 9 में अच्छी तरह से घटता है (कोई स्क्रॉल नहीं है, सिर्फ एक सामान्य तालिका)। बेला यहाँ पोस्ट के रूप में यह एक बेहतर संस्करण है। आपको बस इतना करने की ज़रूरत है tr पर एक ऊंचाई निर्धारित करें

यह समाधान बनाने के लिए अतिरिक्त सीएसएस, IE9 में अच्छी तरह नीचा दिखता है

 tr { height: 25px; /* This could be any value, it just needs to be set. */ } 

इस समाधान के आईई 9 संस्करण में अच्छी तरह से अपमानजनक दिखने वाला जेएसफ़ाल्ड है

संपादित करें : बेला के एक संस्करण से लिंक करने के लिए अद्यतन बेला लिंक जो टिप्पणियों में वर्णित मुद्दों के लिए फ़िक्सेस शामिल हैं बस नवीनतम और महानतम संस्करण के साथ एक स्निपेट को जोड़ते समय मैं उस पर हूं:

 $('table').on('scroll', function() { $("table > *").width($("table").width() + $("table").scrollLeft()); }); 
 html { font-family: verdana; font-size: 10pt; line-height: 25px; } table { border-collapse: collapse; width: 300px; overflow-x: scroll; display: block; } thead { background-color: #EFEFEF; } thead, tbody { display: block; } tbody { overflow-y: scroll; overflow-x: hidden; height: 140px; } td, th { min-width: 100px; height: 25px; border: dashed 1px lightblue; overflow: hidden; text-overflow: ellipsis; max-width: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>AAAAAAAAAAAAAAAAAAAAAAAAAA</td> <td>Row 1</td> <td>Row 1</td> <td>Row 1</td> <td>Row 1</td> </tr> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> <tr> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> </tr> <tr> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> </tr> <tr> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> </tr> <tr> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> </tr> <tr> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> </tr> <tr> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> </tr> </tbody> </table> 

इस लंबे समय के बाद प्रश्न का उत्तर देने के लिए माफी, लेकिन दिए गए हल ने मुझे सूट नहीं किया और मुझे बेहतर एक मिला। HTML (कोई jquery) के साथ ऐसा करने का सबसे आसान तरीका यहां है:

इससे पहले, सवाल के लिए समाधान बेला https://jsfiddle.net/3vzrunkt/

 <div> <div style="overflow:hidden;;margin-right:16px" id="headerdiv"> <table id="headertable" style="min-width:900px" border=1> <thead> <tr> <th style="width:120px;min-width:120px;">One</th> <th style="width:420px;min-width:420px;">Two</th> <th style="width:120px;min-width:120px;">Three</th> <th style="width:120px;min-width:120px;">Four</th> <th style="width:120px;min-width:120px;">Five</th> </tr> </thead> </table> </div> <div style="overflow-y:scroll;max-height:200px;" onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;"> <table id="bodytable" border=1 style="min-width:900px; border:1px solid"> <tbody> <tr> <td style="width:120px;min-width:120px;">body row1</td> <td style="width:420px;min-width:420px;">body row2</td> <td style="width:120px;min-width:120px;">body row2</td> <td style="width:120px;min-width:120px;">body row2</td> <td style="width:120px;min-width:120px;">body row2 en nog meer</td> </tr> : : : : </tbody> </table> </div> </div> 

और समाधान की व्याख्या करने के लिए:

  1. आप की जरूरत है और div कोई अतिप्रवाह / स्क्रॉल आवश्यक संलग्न

  2. शीर्षलेख तालिका जिसमें ओवरफ़्लो वाला हेडर तालिका है: स्क्रॉलबार प्रदर्शित नहीं किया जाता है यह सुनिश्चित करने के लिए छुपा हुआ। हाशिया-सही जोड़ें: 16px यह सुनिश्चित करने के लिए कि शुक्राणु के दौरान स्क्रॉलबार बाहर छोड़ दिया जाता है

  3. तालिका अभिलेख और अतिप्रवाह- y युक्त एक अन्य div: स्क्रॉल करें नोट करें कि पैडिंग को शीर्षलेख के दाहिनी ओर स्क्रॉल करने के लिए आवश्यक है।

  4. और सबसे महत्वपूर्ण बात है कि जादुई जे एस हेडर और टेबल डेटा को सिंक करने के लिए:

      onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;" 

jsFiddle में काम उदाहरण

यह डिवेल का उपयोग करके प्राप्त किया जा सकता है यह टेबल के साथ भी किया जा सकता है लेकिन मैं हमेशा div को पसंद करता हूँ

 <body id="doc-body" style="width: 100%; height: 100%; overflow: hidden; position: fixed" onload="InitApp()"> <div> <!--If you don't need header background color you don't need this div.--> <div id="div-header-hack" style="height: 20px; position: absolute; background-color: gray"></div> <div id="div-header" style="position: absolute; top: 0px; overflow: hidden; height: 20px; background-color: gray"> </div> <div id="div-item" style="position: absolute; top: 20px; overflow: auto" onscroll="ScrollHeader()"> </div> </div> </body> 

जावास्क्रिप्ट:
कृपया इस भाग के लिए jsFiddle देखें। अन्यथा यह जवाब बहुत लंबा हो जाता है।

यह सचमुच सप्ताह के लिए पागल हो रहा है मुझे एक ऐसा हल मिला जो मेरे लिए काम करेगा जिसमें शामिल है:

  1. गैर-निश्चित कॉलम चौड़ाई – वे खिड़की के आकार में बढ़ने और बढ़ते हैं।
  2. तालिका में एक क्षैतिज स्क्रॉल-बार की आवश्यकता होती है, लेकिन तब नहीं जब यह नहीं है।
  3. कॉलम की संख्या अप्रासंगिक है – यह कितने स्तंभों के आकार का है, जिसे आपको इसकी आवश्यकता है
  4. सभी स्तंभों को समान चौड़ाई की आवश्यकता नहीं है।
  5. हेडर सही स्क्रॉलबार के अंत तक सभी तरह की ओर जाता है
  6. कोई जावास्क्रिप्ट नहीं!

… लेकिन कुछ चेतावनियां हैं:

  1. ऊर्ध्वाधर स्क्रॉलबार तब तक दिखाई नहीं देता जब तक आप दाईं तरफ स्क्रॉल नहीं करते। यह देखते हुए कि ज्यादातर लोगों के पास स्क्रॉल पहिये हैं, यह स्वीकार्य बलिदान था।

  2. स्क्रॉलबार की चौड़ाई को जाना चाहिए। मेरी वेबसाइट पर मैंने स्क्रॉलबार की चौड़ाई निर्धारित की है (मैं पुराने, असंगत ब्राउज़र के साथ ज़्यादा चिंतित नहीं हूं), इसलिए मैं तब div और table चौड़ाई का हिसाब कर सकता हूं जो कि स्क्रॉलबार पर आधारित समायोजित होती है।

मेरे कोड को यहां पोस्ट करने के बजाय, मैं जेएसएफडल के लिए एक लिंक पोस्ट करूंगा।

फिक्स्ड हेडर टेबल + स्क्रॉल बाएं / दाएं

आप निम्न सीएसएस कोड का उपयोग कर सकते हैं ..

 body { margin:0; padding:0; height: 100%; width: 100%; } table { border-collapse: collapse; /* make simple 1px lines borders if border defined */ } tr { width: 100%; } .outer-container { background-color: #ccc; top:0; left: 0; right: 300px; bottom:40px; overflow:hidden; } .inner-container { width: 100%; height: 100%; position: relative; } .table-header { float:left; width: 100%; } .table-body { float:left; height: 100%; width: inherit; } .header-cell { background-color: yellow; text-align: left; height: 40px; } .body-cell { background-color: blue; text-align: left; } .col1, .col3, .col4, .col5 { width:120px; min-width: 120px; } .col2 { min-width: 300px; } 

यदि यह वही है जो आप केवल HTML और CSS समाधान चाहते हैं

बेला

यहाँ HTML है

 <div class="outer-container"> <!-- absolute positioned container --> <div class="inner-container"> <div class="table-header"> <table id="headertable" width="100%" cellpadding="0" cellspacing="0"> <thead> <tr> <th class="header-cell col1">One</th> <th class="header-cell col2">Two</th> <th class="header-cell col3">Three</th> <th class="header-cell col4">Four</th> <th class="header-cell col5">Five</th> </tr> </thead> </table> </div> <div class="table-body"> <table id="bodytable" width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> </tbody> </table> </div> </div> </div> 

और यह सीएसएस है

 body { margin:0; padding:0; height: 100%; width: 100%; } table { border-collapse: collapse; /* make simple 1px lines borders if border defined */ } tr { width: 100%; } .outer-container { background-color: #ccc; position: absolute; top:0; left: 0; right: 300px; bottom:40px; overflow: scroll; } .inner-container { width: 100%; height: 100%; position: relative; overflow-x: visible; overflow-y:visible; } .table-header { float:left; width: 100%; } .table-body { float:left; height: auto; width: auto; overflow: visible; background-color: red; } .header-cell { background-color: yellow; text-align: left; height: 40px; } .body-cell { background-color: transparent; text-align: left; } .col1, .col3, .col4, .col5 { width:120px; min-width: 120px; } .col2 { min-width: 300px; } 

मुझे बताएं कि यह वही है जो आपको चाहिए या कुछ चीज़ गायब है मैं अन्य जवाबों के माध्यम से गया और पाया कि jquery का इस्तेमाल किया गया है। मैंने इसे धारणा पर लिया कि आपको सीएसएस समाधान की ज़रूरत है। अगर मुझे कोई और बात याद आ रही है तो कृपया उल्लेख करें 🙂