दिलचस्प पोस्ट
एसआरएलएल सर्वर रिपोर्टिंग सेवा के लिए यूआरएल के माध्यम से पासिंग पैरामीटर डिवीजन परिणाम हमेशा शून्य है जीएसी का इस्तेमाल करने के फायदे और नुकसान क्या हैं? रूबी तरीके में विस्मयादिबोधक चिह्न क्यों उपयोग किए जाते हैं? एएसपी.नेट एमवीसी और आईआईएस 7 में कच्चे एचटीटीपी अनुरोध / प्रतिक्रिया दर्ज करना फेसबुक शैली JQuery स्वत: पूर्ण प्लगइन रेंज (शुरू, अंत) क्यों शामिल नहीं है अंत? एंड्रॉइड स्टूडियो – रिलीज एपीके पर असली एंड्रॉइड डिवाइस पर Google मानचित्र अभी भी रिक्त है ओओपी का क्या मतलब है? Jquery.dialog में एक आंशिक दृश्य लोड हो रहा है जावास्क्रिप्ट का उपयोग करते हुए IFrame से क्रॉस डोमेन यूआरएल एक्सेस कैसे लागू हो सकता है? पायथन में stdout को पाइप करते समय सही एन्कोडिंग सेट करना कई बार फ़ायरिंग jQuery के क्लिक ईवेंट्स कैसे JQuery क्लोन () और आईडी बदलने के लिए कुकीज़ बनाम सत्र

मैं तय / जमे हुए बाएं स्तंभ और स्क्रॉल करने वाला शरीर के साथ एक HTML तालिका कैसे बनाऊं?

मैं तय / जमे हुए बाएं स्तंभ और स्क्रॉल करने वाला शरीर के साथ एक HTML तालिका कैसे बनाऊं?

मुझे एक सरल समाधान की आवश्यकता है मुझे पता है कि यह कुछ अन्य प्रश्नों के समान है, जैसे:

  • निश्चित हेडर और एक निश्चित कॉलम के साथ HTML तालिका?
  • स्क्रॉल करने पर, संभवतः जावास्क्रिप्ट और सीएसएस का उपयोग करते हुए मैं पहली पंक्ति और तालिका का पहला कॉलम कैसे लॉक कर सकता हूं?

लेकिन मुझे जमे हुए होने के लिए सिर्फ एक बायां स्तंभ की आवश्यकता है और मैं एक सरल और स्क्रिप्ट-कम समाधान पसंद करता हूं।

वेब के समाधान से एकत्रित समाधान "मैं तय / जमे हुए बाएं स्तंभ और स्क्रॉल करने वाला शरीर के साथ एक HTML तालिका कैसे बनाऊं?"

यदि आप एक मेज चाहते हैं जहां केवल कॉलम क्षैतिज स्क्रॉल करते हैं, तो आप position: absolute सकते position: absolute पहले कॉलम position: absolute (और अपनी चौड़ाई स्पष्ट रूप से निर्दिष्ट करें), और फिर पूरे तालिका को overflow-x: scroll । हालांकि आईई 7 में इसे करने की कोशिश मत करो …

प्रासंगिक एचटीएमएल और सीएसएस:

 table { border-collapse: separate; border-spacing: 0; border-top: 1px solid grey; } td, th { margin: 0; border: 1px solid grey; white-space: nowrap; border-top-width: 0px; } div { width: 500px; overflow-x: scroll; margin-left: 5em; overflow-y: visible; padding: 0; } .headcol { position: absolute; width: 5em; left: 0; top: auto; border-top-width: 1px; /*only relevant for first row*/ margin-top: -1px; /*compensate for top border*/ } .headcol:before { content: 'Row '; } .long { background: yellow; letter-spacing: 1em; } 
 <div> <table> <tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> </table> </div> 

यह एक रोचक jQuery प्लगइन है जो निश्चित हेडर और / या कॉलम बनाता है। निर्धारित कॉलम को डेमो पृष्ठ पर सही रखने के लिए टॉगल करें ताकि उसे कार्रवाई में देखा जा सके।

निश्चित चौड़ाई बाएं स्तंभ के मामले में सबसे अच्छा समाधान इमोन नेरबोन द्वारा प्रदान किया गया है।

चर की चौड़ाई बाएं कॉलम के मामले में मैंने पाया कि सबसे अच्छा समाधान दो समान तालिकाओं को बनाने और एक दूसरे से ऊपर धक्का। डेमो: http://jsfiddle.net/xG5QH/6/

 <!DOCTYPE html> <html> <head> <style type="text/css"> /* important styles */ .container { /* Attach fixed-th-table to this container, in order to layout fixed-th-table in the same way as scolled-td-table" */ position: relative; /* Truncate fixed-th-table */ overflow: hidden; } .fixed-th-table-wrapper td, .fixed-th-table-wrapper th, .scrolled-td-table-wrapper td, .scrolled-td-table-wrapper th { /* Set background to non-transparent color because two tables are one above another. */ background: white; } .fixed-th-table-wrapper { /* Make table out of flow */ position: absolute; } .fixed-th-table-wrapper th { /* Place fixed-th-table th-cells above scrolled-td-table td-cells. */ position: relative; z-index: 1; } .scrolled-td-table-wrapper td { /* Place scrolled-td-table td-cells above fixed-th-table. */ position: relative; } .scrolled-td-table-wrapper { /* Make horizonal scrollbar if needed */ overflow-x: auto; } /* Simulating border-collapse: collapse, because fixed-th-table borders are below ".scrolling-td-wrapper table" borders */ table { border-spacing: 0; } td, th { border-style: solid; border-color: black; border-width: 1px 1px 0 0; } th:first-child { border-left-width: 1px; } tr:last-child td, tr:last-child th { border-bottom-width: 1px; } /* Unimportant styles */ .container { width: 250px; } td, th { padding: 5px; } </style> </head> <body> <div class="container"> <div class="fixed-th-table-wrapper"> <!-- fixed-th-table --> <table> <tr> <th>aaaaaaa</th> <td>ccccccccccc asdsad asd as</td> <td>ccccccccccc asdsad asd as</td> </tr> <tr> <th>cccccccc</th> <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td> <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td> </tr> </table> </div> <div class="scrolled-td-table-wrapper"> <!-- scrolled-td-table - same as fixed-th-table --> <table> <tr> <th>aaaaaaa</th> <td>ccccccccccc asdsad asd as</td> <td>ccccccccccc asdsad asd as</td> </tr> <tr> <th>cccccccc</th> <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td> <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td> </tr> </table> </div> </div> </body> </html> 

एफडब्ल्यूआईडब्ल्यू, यहां एक मेज है जो सिर के साथ स्क्रॉल करने योग्य है और पक्ष तय है।

http://codepen.io/ajkochanowicz/pen/KHdih

position: fixed साथ बाएं स्तंभ को स्टाइल करें position: fixed । (आप संभवतः top और left शैलियों का उपयोग करना चाहते हैं जहां यह बिल्कुल होता है।)

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

 .table-fixed-left table, .table-fixed-right table { border-collapse: collapse; } .table-fixed-right td, .table-fixed-right th, .table-fixed-left td, .table-fixed-left th { border: 1px solid #ddd; padding: 5px 5px; } .table-fixed-left { width: 120px; float: left; position: fixed; overflow-x: scroll; white-space: nowrap; text-align: left; border: 1px solid #ddd; z-index: 2; } .table-fixed-right { width: calc(100% - 145px); right: 15px; position: fixed; overflow-x: scroll; border: 1px solid #ddd; white-space: nowrap; } .table-fixed-right td, .table-fixed-right th { padding: 5px 10px; } 
 <div class="table-fixed-left"> <table> <tr> <th>Normal Header</th> </tr> <tr> <th>Header with extra line <br/>&nbsp;</th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal with extra line <br/>&nbsp;</th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal Header</th> </tr> </table> </div> <div class="table-fixed-right"> <table> <tr> <th>Header</th> <th>Another header</th> <th>Header</th> <th>Header really really really really long</th> </tr> <tr> <td>Info Long</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info Long</td> </tr> <tr> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> </tr> <tr> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> </table> </div> 

मैंने एर्मोन नेरबोन के उत्तर ले लिया और इसे टेबल के साथ काम करने के लिए संपादित किया, जो पूरी चौड़ाई भरते हैं।

http://jsfiddle.net/DYgD6/6/

 <!DOCTYPE html> <html><head><title>testdoc</title> <style type="text/css"> body { font:16px Calibri; } table { border-collapse:separate; border-top: 3px solid grey; } td { margin:0; border:3px solid grey; border-top-width:0px; white-space:nowrap; } #outerdiv { position: absolute; top: 0; left: 0; right: 5em; } #innerdiv { width: 100%; overflow-x:scroll; margin-left: 5em; overflow-y:visible; padding-bottom:1px; } .headcol { position:absolute; width:5em; left:0; top:auto; border-right: 0px none black; border-top-width:3px; /*only relevant for first row*/ margin-top:-3px; /*compensate for top border*/ } .headcol:before { content:'Row '; } .long { background:yellow; letter-spacing:1em; } </style></head><body> <div id="outerdiv"> <div id="innerdiv"> <table> <tr> <td class="headcol">1</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <td class="headcol">2</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <td class="headcol">3</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <td class="headcol">4</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <td class="headcol">5</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <td class="headcol">6</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <td class="headcol">7</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <td class="headcol">8</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <td class="headcol">9</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> </table> </div></div> </body></html> 

निश्चित स्तंभ की चौड़ाई अभी भी एक निर्धारित मान होने की आवश्यकता है।

यदि आप Webdevelopper नरक में हैं और आईई 6 के लिए यह काम करने की आवश्यकता है, तो यहां एक नमूना कोड का उपयोग किया गया है I

 <html> <head> <style type="text/css"> .fixme { position: relative; left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); background-color: #FFFFFF; } </style> </head> <body> <table width="1500px" border="2"> <tr> <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet</td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> </tr> <tr> <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> </tr> <tr> <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> </tr> <tr> <td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> <td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td> </tr> </table> </body> </html> 

यह शायद केवल IE6 के लिए काम करेगा, इसलिए सीएसएस के लिए सशर्त टिप्पणियों का उपयोग करें।

कोई भी प्लगइन जोड़ने की आवश्यकता नहीं है, सीएसएस इस नौकरी कर सकता है !!!

विचार प्रत्येक कॉलम में सभी प्रथम कोशिकाओं की स्थिति को पूर्ण करना है, और चौड़ाई तय की गई है। उदाहरण के लिए:

 max-width: 125px; min-width: 125px; position: absolute; 

यह पहले कॉलम के तहत कुछ कॉलम के कुछ हिस्सों को छुपाता है, इसलिए पहले स्तंभ के समान चौड़ाई के साथ एक खाली दूसरा कॉलम जोड़ें (दूसरा खाली टीडी जोड़ें)

मैंने परीक्षण किया और यह Chrome और Firefox में काम करता है

Eamon Nerbonne, मैंने आपके कोड में कुछ सीएसएस बदल दिया और अब यह बेहतर है (स्क्रॉल बार पहली पंक्ति से शुरू होता है)

http://jsfiddle.net/At8L8/

मैं सिर्फ दो पंक्ति जोड़ता हूं:

 .div : padding-left:5em; .headcol : background-color : #fff; 

यदि आप कुछ और जटिल विकसित कर रहे हैं और चाहते हैं कि कई स्तंभों को बायीं ओर फिक्स किया जाए, तो आपको शायद इस तरह कुछ चाहिए।

 .wrapper { overflow-x: scroll; } td { min-width: 50px; } .fixed { position: absolute; background: #aaa; } 
 <div class="content" style="width: 400px"> <div class="wrapper" style="margin-left: 100px"> <table> <thead> <tr> <th class="fixed" style="left: 0px">aaa</th> <th class="fixed" style="left: 50px">aaa2</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> </tr> </thead> <tbody> <tr> <td class="fixed" style="left: 0px">aaa</td> <td class="fixed" style="left: 50px">aaa2</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td class="fixed" style="left: 0">bbb</td> <td class="fixed" style="left: 50px">bbb2</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> </tbody> </table> </div> </div> 

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

बस इसे ध्यान में रखें कि यदि आप पंक्तियों को एक तालिका में छोड़ना चाहते हैं और दूसरे को नहीं, या पंक्तियों की ऊंचाई को बदलने के लिए आपको इस कोड को समायोजित करने की आवश्यकता हो सकती है

 <table class = "fixedColumns"> <tr><td> row 1 </td></tr> <tr><td> row 2 </td></tr> </table> <table class = "scrollableTable"> <tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr> <tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr> </table> <style type = "text/css" > .fixedColumns { vertical-align:top; display: inline-block; } .scrollableTable { display: inline-block; width:50px; white-space: nowrap; overflow-x: scroll; } </style> 

वैकल्पिक रूप से, एक पूर्वनिर्धारित आकार ( height:20em माध्यम से height:20em , उदाहरण के लिए) के साथ, और overflow-y:scroll; उपयोग overflow-y:scroll;

उसके बाद, आपके पास एक विशाल समूह हो सकता है, जो पृष्ठ के बाकी हिस्सों से स्वतंत्र रूप से स्क्रॉल करेगा।

 //If the table has tbody and thead, make them the relative container in which we can fix td and th as absolute table tbody { position: relative; } table thead { position: relative; } //Make both the first header and first data cells (First column) absolute so that it sticks to the left table td:first-of-type { position: absolute; } table th:first-of-type { position: absolute; } //Move Second column according to the width of column 1 table td:nth-of-type(2) { padding-left: <Width of column 1>; } table th:nth-of-type(2) { padding-left: <Width of column 1>; } 

यहां सबसे लोकप्रिय जवाब का एक और संशोधन है, लेकिन पहली कॉलम लेबल में पाठ की चर लंबाई को संभालने के साथ: http://jsfiddle.net/ozx56n41/

असल में, मैं पंक्ति ऊंचाई बनाने के लिए दूसरे कॉलम का उपयोग कर रहा हूं, जैसा कि उल्लेख किया गया था लेकिन मेरा बेला वास्तव में ऊपर वर्णित सबसे ज्यादा विपरीत काम करता है।

HTML:

 <div id="outerdiv"> <div id="innerdiv"> <table> <tr> <td class="headcol"><div>This is a long label</div></td> <td class="hiddenheadcol"><div>This is a long label</div></td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <td class="headcol"><div>Short label</div></td> <td class="hiddenheadcol"><div>Short label</div></td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> </table> </div> </div> 

सीएसएस:

 body { font: 16px Calibri; } #outerdiv { position: absolute; top: 0; left: 0; right: 0; width: 100%; border-top: 1px solid grey; } #innerdiv { overflow-x: scroll; margin-left: 100px; overflow-y: visible; padding-bottom: 1px; } table { border-collapse:separate; } td { margin: 0; border: 1px solid grey; border-top-width: 0; border-left-width: 0px; padding: 10px; } td.headcol { /* Frozen 1st column */ position: absolute; left: 0; top: auto; border-bottom-width: 1px; padding: 0; border-left-width: 1px; } td.hiddenheadcol { /* Hidden 2nd column to create height */ max-width: 0; visibility: hidden; padding: 0; } td.headcol div { /* Text container in the 1st column */ width: 100px; max-width: 100px; background: lightblue; padding: 10px; box-sizing: border-box; } td.hiddenheadcol div { /* Text container in the 2nd column */ width: 100px; max-width: 100px; background: red; padding: 10px; } td.long { background:yellow; letter-spacing:1em; } 

एचटीएमएल 5 में, आप सीएसएस style.transform उपयोग कर सकते हैं। style.transform
हालांकि, मैं आपको "पृष्ठों के बीच स्वाइप" की पुष्टि करता हूं यदि आप मैक पर लागू करते हैं

नमूना कोड देखें

 let l = 0; let t = 0; const MouseWheelHandler = (e) => { // vertical scroll if (e.deltaX == -0) { // t = t - e.deltaY // horizonal scroll } else if (e.deltaY == -0) { l = l - e.deltaX if (l >= 0) { l = 0; document.getElementById("gantt_task").style.transform = "translateX(1px)" document.getElementById("gantt_task_header").style.transform = "translateX(1px)" return false } document.getElementById("gantt_task").style.transform = "translateX(" + l.toString() + "px)" document.getElementById("gantt_task_header").style.transform = "translateX(" + l.toString() + "px)" } return false; } window.addEventListener("wheel", MouseWheelHandler, false); 
 .row { border-bottom: 1px solid #979A9A } #gantt_grid_header { height: 30px; width: 100px; position: fixed; z-index: 3; top: 0px; left: 0px; border: 1px solid #cecece; background-color: #F08080; } #gantt_task_header { height: 30px; width: 400px; position: fixed; z-index: 2; top: 0px; left: 100px; border: 1px solid #cecece; background-color: #FFC300; } #gantt_grid { width: 100px; height: 400px; position: absolute; left: 0px; top: 0px; z-index: 1; border: 1px solid #cecece; background-color: #DAF7A6; } #gantt_task { width: 400px; height: 400px; position: absolute; left: 100px; top: 0px; border: 1px solid #cecece; background-color: #FF5733; } 
 <html> <div id="gantt_grid_header"> HEADER </div> <div id="gantt_grid"> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> </div> <div id="gantt_task_header"> DATA HEADER </div> <div id="gantt_task"> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> </div> </html> 

सिर में इसे जोड़ें:

 <link rel="stylesheet" type="text/css" href="/path/to/easyscrolltable.css"> <script src="/path/to/easyscrolltable.js"></script> 

जावास्क्रिप्ट:

 $('table.ytable').EasyScrollableTable({ 'top' : 1, 'left' : 1, 'class': '', 'width': '100%', 'height': 'auto', 'footer': false, 'hover': true });