मैं किसी तालिका के शरीर को कैसे स्क्रॉल कर सकता हूं, लेकिन उसके सिर को स्थिर रखें?

148

मैं एक पृष्ठ लिख रहा हूँ जहाँ मुझे सेट आकार बनाए रखने के लिए एक HTML तालिका की आवश्यकता है। मुझे हर समय वहाँ रहने के लिए तालिका के शीर्ष पर शीर्ष लेखों की आवश्यकता होती है, लेकिन तालिका में कितनी पंक्तियाँ जोड़ी जाती हैं, इसके लिए मुझे तालिका के मुख्य भाग की भी आवश्यकता होती है। एक्सेल का एक छोटा संस्करण सोचें। यह एक सरल कार्य की तरह लगता है लेकिन वेब पर मैंने पाया लगभग हर समाधान में कुछ कमियां हैं। इसे कैसे हल किया जा सकता है?

javascript  html  css  html-table 
— मिन्टी
स्रोत
2
वहाँ बहुत सारे उदाहरण हैं। यह उनमें से एक है ।
— डैरेन कोप्प
मुझे IE6, IE7, FF, को लक्षित करने की आवश्यकता है ... लेकिन विशेष रूप से IE दुर्भाग्य से
— minty
वहां बहुत सीएसएस हैक है। IE7 में काम पाने के लिए यह तुच्छ होना चाहिए।
— जिम
4
मुझे सभी ब्राउज़रों के उत्तर में दिलचस्पी है!
— मिन्टी
15
"IE7 में काम करने के लिए यह तुच्छ होना चाहिए।" जिम, है कि तुम? क्या आप मेरे प्रोजेक्ट मैनेजर हैं? :)
— आरोनियस

जवाबों:

53

मुझे वही जवाब ढूंढना था। मुझे मिला सबसे अच्छा उदाहरण है http://www.cssplay.co.uk/menu/tablescroll.html - मैंने पाया कि उदाहरण # 2 ने मेरे लिए अच्छा काम किया। आपको जावा स्क्रिप्ट के साथ आंतरिक तालिका की ऊंचाई निर्धारित करनी होगी, बाकी सीएसएस है।

— केन पेन
स्रोत
3
दुर्भाग्य से, यह विधि विफल हो जाती है जब आपके पास एक विस्तृत तालिका (क्षैतिज स्क्रॉल) होती है। आपके पास दो क्षैतिज स्क्रॉलबार होंगे; हेडर के लिए एक और डेटा के लिए एक।
— वोल्व्रॉन
4
यदि आप <th> के अंदर <th> चौड़ाई निर्दिष्ट नहीं करते हैं तो आपका समाधान काम नहीं करता है
— अलेक्जेंड्रू आर
2
नए स्टैक ओवरफ्लो मानकों के अनुपालन के लिए, क्या आप लिंक से संबंधित बिट्स को शामिल करने के लिए इस उत्तर को संपादित कर सकते हैं?
— निधि मोनिका का मुकदमा
स्रोत, बिली कहाँ है?
— कैंडलजैक
जावास्क्रिप्ट या पूर्व-परिभाषित मूल्यों का सहारा लिए बिना हेडर और (स्क्रॉल करने योग्य) टेबल बॉडी के बीच कॉलम की चौड़ाई को सिंक्रनाइज़ करना असंभव है।
— rustyx
34

मुझे डेटाटेबल्स काफी लचीली लगीं। जबकि इसका डिफ़ॉल्ट संस्करण jquery पर आधारित है, एक AngularJs प्लगइन भी है ।

— विटाली फेडोरेंको
स्रोत
बहुत चालाक - मेरे एस 3, एंड्रॉइड 4.0.4 पर अधिकांश कार्यक्षमता का काम है, लेकिन खोज / फ़िल्टर नहीं
— जेन्स फ्रेंड्सन
12

मैंने सीन हैड्डी के इसी तरह के प्रश्न का उत्कृष्ट समाधान देखा और कुछ संपादन करने की स्वतंत्रता ली :

  • आईडी के बजाय कक्षाओं का उपयोग करें, इसलिए एक पेज पर कई टेबल के लिए एक jQuery स्क्रिप्ट का पुन: उपयोग किया जा सकता है
  • कैप्शन, thead, tfoot और tbody जैसे शब्दार्थ HTML तालिका तत्वों के लिए जोड़ा गया समर्थन
  • स्क्रॉलबार को वैकल्पिक बनाया गया ताकि यह उन टेबल के लिए दिखाई न दे जो स्क्रॉल करने योग्य ऊँचाई से "छोटी" हों
  • स्क्रॉलबार को टेबल के दाहिने किनारे तक लाने के लिए स्क्रॉलिंग डिव की चौड़ाई को समायोजित किया
  • द्वारा अवधारणा को सुलभ बनाया
    • इंजेक्शन-स्थैतिक टेबल हेडर पर aria-hidden = "true" का उपयोग करना
    • और मूल जगह को छोड़कर, सिर्फ jQuery और सेट के साथ छिपा हुआ है aria-hidden="false"
  • विभिन्न आकारों के साथ कई तालिकाओं के उदाहरण दिखाए गए हैं

शॉन ने भारी उठाने का काम किया, हालाँकि। मैट बर्लैंड के लिए धन्यवाद, इंगित करने के लिए भी tfoot का समर्थन करने की आवश्यकता है।

कृपया अपने लिए देखें http://jsfiddle.net/jhfrench/eNP2N/

— जेरेमी फ्रेंच
स्रोत
अच्छा है, लेकिन यदि आप एक हेडर और एक पाद चाहते हैं तो यह खराब हो जाता है !
— मैट बर्लेंड
3
धन्यवाद मैट, मैंने समायोजन किया।
— जेरॉमी फ्रेंच
यदि आप td और th बॉर्डर दिखाते हैं तो संरेखण की आवश्यकता है।
— ढोची
8

क्या आपने थ्रेड और tbody का उपयोग करने की कोशिश की है, और ओवरफ्लो के साथ tbody पर एक निश्चित ऊंचाई सेट कर रहे हैं: स्क्रॉल?

आपके लक्षित ब्राउज़र क्या हैं?

संपादित करें: यह फ़ायरफ़ॉक्स में अच्छी तरह से (लगभग) काम करता है - ऊर्ध्वाधर स्क्रॉलबार के अलावा ने क्षैतिज स्क्रॉलबार की आवश्यकता के कारण भी - यक। आईई ने प्रत्येक td की ऊँचाई निर्धारित की, जो मैंने tbody की ऊँचाई को निर्दिष्ट किया था। यहाँ सबसे अच्छा मैं के साथ आ सकता है:

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>
— क्रिस मरास्टी-जॉर्ज
स्रोत
1
मुझे IE6, IE7, FF, को लक्षित करने की आवश्यकता है ... लेकिन विशेष रूप से IE दुर्भाग्य से
— minty
तालिका को बदलें ताकि यह चौड़ाई में 100% से कम हो, 99% कहे और इसे समस्या का ध्यान रखना चाहिए
— वोल्फमैनड्रैगन
2
overflow-x: hidden;और overflow-y: autoमदद भी।
— justkt
7
यह फ़ायरफ़ॉक्स में काम करता था, और यह स्पष्ट और गैर-स्पष्ट कोड है। हालाँकि, फ़ायरफ़ॉक्स के हाल के संस्करणों में, यह टूट गया है।
— रासमस काज
6
यह "ब्लॉक कंटेनर" (क्योंकि "अतिप्रवाह" लागू है काम नहीं करता है w3.org/TR/CSS21/visufx.html#overflow ), और तालिका बक्से हैं नहीं "ब्लॉक कंटेनर" ( w3.org/TR/CSS21/ visuren.html # block-box )।
— मुहस्तिथ
8

आपको क्या चाहिए:

1) सीमित ऊंचाई का एक टेबल बॉडी है क्योंकि स्क्रॉल केवल तब होता है जब सामग्री स्क्रॉल विंडो से बड़ी होती है। हालाँकि tbody, इसका आकार नहीं हो सकता, और आपको ऐसा करने के लिए इसे प्रदर्शित blockकरना होगा:

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) पुनः सिंक टेबल हेडर और टेबल बॉडी कॉलम चौड़ाई के रूप में उत्तरार्द्ध को एक blockअसंबंधित तत्व बना देता है। ऐसा करने का एकमात्र तरीका दोनों को समान कॉलम चौड़ाई लागू करके सिंक्रनाइज़ेशन को अनुकरण करना है ।

हालाँकि, चूंकि tbodyस्वयं blockअब एक है, इसलिए यह अब एक जैसा व्यवहार नहीं कर सकता है table। चूंकि आपको अभी भी tableआपको स्तंभों को सही ढंग से प्रदर्शित करने के लिए एक व्यवहार की आवश्यकता है, इसलिए समाधान आपकी प्रत्येक पंक्तियों को व्यक्तिगत रूप से प्रदर्शित करने के लिए पूछना है table:

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

(ध्यान दें कि, इस तकनीक का उपयोग करके, आप अब पंक्तियों में स्पैन नहीं कर पाएंगे)।

एक बार यह हो, तो आप स्तंभ चौड़ाई को लागू दोनों में एक ही चौड़ाई कर सकते हैं theadऔर tbody। आप ऐसा नहीं कर सकते:

  • प्रत्येक स्तंभ के लिए व्यक्तिगत रूप से (विशिष्ट सीएसएस कक्षाओं या इनलाइन स्टाइल के माध्यम से), जो प्रत्येक तालिका उदाहरण के लिए करने के लिए काफी थकाऊ है;
  • सभी कॉलमों के लिए समान रूप से ( th, td { width: 20%; }यदि आपके पास उदाहरण के लिए 5 कॉलम हैं), जो अधिक व्यावहारिक है (प्रत्येक तालिका उदाहरण के लिए चौड़ाई निर्धारित करने की आवश्यकता नहीं है) लेकिन किसी भी कॉलम की गणना के लिए काम नहीं कर सकते
  • किसी भी स्तंभ की गणना के लिए समान रूप से, एक निश्चित तालिका लेआउट के माध्यम से।

मुझे अंतिम विकल्प पसंद है, जिसे जोड़ने की आवश्यकता है:

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

यहाँ एक डेमो देखें , इस प्रश्न के उत्तर से कांटा ।

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

संपादित करें:   यह एक बहुत पुराना उत्तर है और यहां समृद्धि के लिए सिर्फ यह दिखाने के लिए है कि इसे 2000 में एक बार वापस समर्थित किया गया था, लेकिन गिरा दिया गया क्योंकि 2010 की ब्राउज़र रणनीति W3C विनिर्देशों का सम्मान करना था भले ही कुछ विशेषताएं हटा दी गई हों: फिक्स्ड हेडर के साथ स्क्रॉल करने योग्य तालिका / पाद लेख HTML5 से पहले स्पष्ट रूप से निर्दिष्ट किया गया था।

बुरी खबर

दुर्भाग्य से फिक्स्ड thead/ के साथ स्क्रॉल करने योग्य तालिका को संभालने का कोई सुंदर तरीका नहीं है tfoot क्योंकि HTML / CSS विनिर्देश उस सुविधा के बारे में बहुत स्पष्ट नहीं हैं ।

स्पष्टीकरण

हालाँकि HTML 4.01 विशिष्टता कहती है thead/ tfoot/ tbodyका उपयोग किया जाता है (पेश किया जाता है) टेबल बॉडी को स्क्रॉल करने के लिए:

तालिका पंक्तियों को THEAD, TFOOT और TBODY तत्वों [...] का उपयोग करके [...] समूहीकृत किया जा सकता है। यह विभाजन उपयोगकर्ता एजेंटों को टेबल सिर और पैर की स्वतंत्र रूप से टेबल बॉडी की स्क्रॉलिंग का समर्थन करने में सक्षम बनाता है।

लेकिन एफएफ 3.6 पर कार्यशील स्क्रॉल करने योग्य तालिका सुविधा को एफएफ 3.7 में हटा दिया गया है क्योंकि इसे बग के रूप में माना जाता है क्योंकि HTML / सीएसएस विनिर्देशों के अनुरूप नहीं है। FF बग पर यह और वह टिप्पणी देखें ।

मोज़िला डेवलपर नेटवर्क टिप

नीचे स्क्रॉल तालिका के लिए MDN उपयोगी सुझावों का एक सरलीकृत संस्करण है
यह संग्रहित पृष्ठ या वर्तमान फ्रांसीसी संस्करण देखें

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

हालाँकि MDN यह भी कहता है कि यह FF पर कोई काम नहीं करता है :-(
मैंने IE8 पर भी परीक्षण किया है => तालिका स्क्रॉल योग्य भी नहीं है: - ((

— olibre
स्रोत
स्क्रॉल करने योग्य तालिका लिंक के लिए एमडीएन युक्तियाँ प्रासंगिक जानकारी नहीं है जो इसे सीमा-पतन के बारे में बोलती है। शायद पेज बदल गया था क्योंकि 5 साल बीत चुके थे
— partizanos
धन्यवाद @partizanos मुझे अंततः MDN इतिहास में मूल विकी पृष्ठ मिला है! मेरा पुराना उत्तर अब अप्रचलित लग रहा है लेकिन समृद्धि के लिए डेवलपर्स की अगली पीढ़ी को पता होगा कि 2000 के ;-) चीयर्स
— ओलिब्रे
3

निश्चित नहीं है कि अगर कोई अभी भी इसे देख रहा है, लेकिन उन्होंने इस तरह से किया है कि मैंने पहले मूल तालिका को प्रदर्शित करने के लिए दो तालिकाओं का उपयोग किया है - पहला सिर्फ मूल तालिका शीर्षक पंक्ति और कोई तालिका निकाय पंक्तियाँ (या एक खाली बॉडी पंक्ति बनाने के लिए नहीं) यह मान्य है)।

दूसरा एक अलग div में है और कोई शीर्षक नहीं है और सिर्फ मूल टेबल बॉडी रो है। अलग-अलग div को तब स्क्रॉल करने योग्य बनाया जाता है।

यह div में दूसरी तालिका HTML में पहली तालिका के ठीक नीचे रखी गई है और यह एक निश्चित शीर्ष लेख और एक स्क्रॉल कम अनुभाग के साथ एक एकल तालिका की तरह दिखता है। मैंने इसे केवल सफारी, फ़ायरफ़ॉक्स और IE (स्प्रिंग 2010 में प्रत्येक के नवीनतम संस्करण) में परीक्षण किया है, लेकिन यह उन सभी में काम करता है।

एकमात्र मुद्दा यह था कि पहली तालिका एक निकाय (W3.org सत्यापनकर्ता - XHTML 1.0 सख्त) के बिना मान्य नहीं होगी, और जब मैंने कोई सामग्री नहीं जोड़ी तो यह एक रिक्त पंक्ति का कारण बनता है। इसे न दिखने के लिए आप CSS का उपयोग कर सकते हैं लेकिन यह अभी भी पृष्ठ पर स्थान खाता है।

— मिक
स्रोत
अतिरिक्त पंक्ति अभी भी स्थान कैसे लेगी? display: none;जब तक आप स्रोत में जगह का मतलब नहीं है, यह किसी भी स्क्रीन स्थान लेने की जरूरत नहीं है ..?
— क्लार्कबेयॉय
3

यह समाधान Chrome 35, फ़ायरफ़ॉक्स 30 और IE 11 (अन्य संस्करणों का परीक्षण नहीं) में काम करता है

इसका शुद्ध CSS: http://jsfiddle.net/ffabreti/d4sope1u/

सब कुछ प्रदर्शित करने के लिए सेट किया गया है: ब्लॉक, टेबल को ऊंचाई की आवश्यकता है:

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }
— फर्नांडो फैब्रेटी
स्रोत
2

इसने हमारे लिए एक आवेदन के लिए इस तरह के एक ग्रिड को लागू करने की कोशिश में भारी सिरदर्द पैदा किया। मैंने सभी विभिन्न तकनीकों की कोशिश की, लेकिन उनमें से प्रत्येक में समस्याएं थीं। सबसे नज़दीकी मैं एक jQuery प्लगइन का उपयोग कर रहा था जैसे फ्लेक्सिग्रिड ( विकल्प के लिए http://www.ajaxrain.com पर देखें ), लेकिन यह 100% विस्तृत तालिकाओं का समर्थन नहीं करता है, जो मुझे चाहिए।

मैं जो कर रहा था, वह मुझे लुढ़का रहा था; फ़ायरफ़ॉक्स स्क्रॉलिंग tbodyतत्वों का समर्थन करता है इसलिए मैं ब्राउज़र को सूँघता था और उपयुक्त CSS (सेटिंग ऊंचाई, अतिप्रवाह आदि का उपयोग करता था ... पूछें कि क्या आप अधिक विवरण चाहते हैं) उस स्क्रॉल को बनाने के लिए, और फिर अन्य ब्राउज़रों के लिए मैंने दो अलग-अलग तालिकाओं का उपयोग किया table-layout: fixedजो उपयोग करने के लिए सेट हैं। एल्गोरिथ्म जो कथित आकार को ओवरफ्लो नहीं करने के लिए ग्वारेंटेड है (सामान्य तालिकाओं का विस्तार होगा जब सामग्री फिट करने के लिए बहुत व्यापक है)। दोनों तालिकाओं को समान चौड़ाई देकर मैं उनके स्तंभों को पंक्तिबद्ध करने में सक्षम हुआ। मैंने स्क्रॉल करने के लिए एक सेट में एक दूसरे को लपेटा और मार्जिन के साथ गुड़ की एक बड़ी पोकरी आदि के साथ वह लुक पाने और महसूस करने में कामयाब रहा जिसे मैं चाहता था।

क्षमा करें यदि यह उत्तर स्थानों में थोड़ा अस्पष्ट लगता है; मैं जल्दी से लिख रहा हूं क्योंकि मेरे पास ज्यादा समय नहीं है। एक टिप्पणी छोड़ दो अगर तुम मुझे किसी भी आगे का विस्तार करना चाहते हो!

— ल्यूक बेनेट
स्रोत
इस पुराने धागे को फिर से जीवित करने के लिए क्षमा करें, लेकिन मुझे वास्तव में यह जानने की आवश्यकता है कि आपने इसे कैसे काम किया। मुझे FF काम कर रहा है लेकिन IE / WebKit ब्राउज़र नहीं। कृपया जब आप मदद कर सकते हैं।
— अल्फेरो चिंगोनो
2

यहाँ एक कोड है जो वास्तव में IE और FF के लिए काम करता है (कम से कम):

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

मैंने इसे स्पष्ट करने के लिए मूल कोड को बदल दिया है और IE में भी ठीक काम करने के लिए और FF भी।

मूल कोड यहाँ

— डैनियल कोस्टा
स्रोत
1
IE7 / 8 में यह केवल Quirks मोड में काम करता है, और जैसे ही आप एक <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
— सिद्धांत
1

यहाँ मेरा विकल्प है। यह हेडर, बॉडी और फुटर के लिए अलग-अलग DIV का भी उपयोग करता है, लेकिन विंडो रीसाइज़िंग और खोज, स्क्रॉलिंग, सॉर्टिंग, फ़िल्टरिंग और पोजिशनिंग के लिए सिंक्रनाइज़ किया जाता है:

मेरी सीडी सूची

तालिकाओं को देखने के लिए जैज़, क्लासिकल ... बटन पर क्लिक करें। यह सेट किया गया है ताकि जावास्क्रिप्ट बंद होने पर भी यह पर्याप्त हो।

IE, FF और WebKit (Chrome, Safari) पर ठीक लगता है।

— goneill
स्रोत
1

क्षमा करें, मैंने आपके प्रश्न के सभी उत्तरों को पढ़ लिया है।

हाँ यहाँ आप चाहते हैं (मैं पहले से ही किया है)

आप समान स्टाइल के लिए एक ही वर्ग के नाम के साथ दो तालिकाओं का उपयोग कर सकते हैं, एक केवल टेबल हेड के साथ और दूसरा आपकी पंक्तियों के साथ। अब इस टेबल को ओवरफ्लो- y: ऑटो या स्क्रोल के साथ एक निश्चित ऊंचाई वाली डिव के अंदर रखें।

— Sanuj
स्रोत
1

ऊपर दिए गए सुझावों के साथ मुझे जो मुख्य समस्या थी वह थी टेबल-टॉक्स में प्लग करने में सक्षम होना। और एक विशिष्ट अधिकतम आकार के लिए विवश टेबल के लिए हेडर को फ्लोट करने में सक्षम होना। मैं अंत में jQuery.floatThead प्लगइन पर ठोकर खाई जिसने फ्लोटिंग हेडर प्रदान किया और काम जारी रखने के लिए छँटाई की अनुमति दी।

इसमें एक अच्छा तुलना पृष्ठ भी है जो स्वयं बनाम समान प्लगइन्स दिखा रहा है ।

— गाइ हॉलिंगटन
स्रोत
1

लाइव JsFiddle

यह केवल HTML और CSS से संभव है

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>
स्निपेट का विस्तार करें

— मो। रफी
स्रोत
0

यदि जावास्क्रिप्ट का उपयोग यहां ठीक है, तो मेरा समाधान है कि सभी स्तंभों (पिक्सेल!) पर तालिका सेट निश्चित चौड़ाई बनाएँ, तालिका में कक्षा स्क्रॉल करें और इस जावास्क्रिप्ट + jquery को 1.4.x css या शैली में ऊँचाई सेट करें!

में परीक्षण किया गया: ओपेरा, क्रोम, सफारी, एफएफ, IE5.5 ( महाकाव्य स्क्रिप्ट विफल ), IE6, IE7, IE8, IE9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

संपादित करें: निश्चित ऊंचाई।

— पीटर
स्रोत
0

मैं जावास्क्रिप्ट (कोई पुस्तकालय नहीं) और सीएसएस के साथ ऐसा करता हूं - तालिका शरीर पृष्ठ के साथ स्क्रॉल करता है , और तालिका को निश्चित चौड़ाई या ऊंचाई नहीं होती है, हालांकि प्रत्येक स्तंभ की चौड़ाई होनी चाहिए। आप छँटाई कार्यक्षमता भी रख सकते हैं।

मूल रूप से:

  1. HTML में, टेबल हेडर पंक्ति और टेबल बॉडी को रखने के लिए कंटेनर divs बनाएं, टेबल बॉडी को छिपाने के लिए "मास्क" div भी बनाएं क्योंकि यह हेडर के पिछले हिस्से को स्क्रॉल करता है।

  2. CSS में, टेबल पार्ट्स को ब्लॉक्स में कनवर्ट करें

  3. जावास्क्रिप्ट में, तालिका की चौड़ाई प्राप्त करें और मास्क की चौड़ाई से मेल करें ... पृष्ठ सामग्री की ऊँचाई प्राप्त करें ... स्क्रॉल स्थिति मापें ... तालिका शीर्ष लेख पंक्ति स्थिति और मास्क की ऊँचाई सेट करने के लिए CSS में हेरफेर करें

यहाँ जावास्क्रिप्ट और ए है jsField DEMO है।

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}
— डेबोरा
स्रोत
लेकिन आपके डेमो में टेबल हेडर नहीं रहता है, यह सिर्फ स्क्रॉल करता है। (क्रोम यहाँ।)
— एसजे।
मैं क्रोम में नहीं देख रहा हूँ। क्या आप सुनिश्चित हैं कि आप हेडर के लिए लाल रंग के निर्देश वाली पीले हाइलाइटेड कोशिकाओं को गलत नहीं समझ रहे हैं? शीर्ष लेख कक्ष शीर्ष पर हैं और ग्रे ("Col 1", "Col 2", आदि) पर ग्रे हैं।
— डेबोरा
0

मेरे लिए, स्क्रॉलिंग से संबंधित कुछ भी वास्तव में तब तक काम नहीं करता जब तक मैंने टेबल सीएसएस से चौड़ाई नहीं हटा दी। मूल रूप से, टेबल सीएसएस इस तरह दिखता था:

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

जैसे ही मैंने चौड़ाई हटा दी: 100%; सभी स्क्रॉलिंग सुविधाओं ने काम करना शुरू कर दिया।

— मैथ्यू पार्क
स्रोत
0

यदि आपके पास पर्याप्त मानक कम हैं;) तो आप एक ऐसी मेज रख सकते हैं जिसमें केवल एक हेडर सीधे एक मेज के ऊपर होता है जिसमें केवल एक शरीर होता है। यह क्षैतिज रूप से स्क्रॉल नहीं करेगा, लेकिन अगर आपको इसकी आवश्यकता नहीं है ...

— M610
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.