टेबल फिक्स्ड हेडर और स्क्रॉल करने योग्य बॉडी

260

मैं बूटस्ट्रैप 3 तालिका का उपयोग करके निश्चित हेडर और एक स्क्रॉल करने योग्य सामग्री के साथ एक तालिका बनाने की कोशिश कर रहा हूं। दुर्भाग्य से मैंने जो समाधान पाया है वह बूटस्ट्रैप के साथ काम नहीं करता है या शैली को गड़बड़ नहीं करता है।

यहाँ एक साधारण बूटस्ट्रैप तालिका है, लेकिन किसी कारण से मेरे लिए अज्ञात व्यक्ति की ऊंचाई 10px नहीं है।

height: 10px !important; overflow: scroll;

उदाहरण:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>
स्निपेट का विस्तार करें

html  css  twitter-bootstrap  html-table 
— गिउलिओ
स्रोत
4
क्या यह मदद करता है? stackoverflow.com/a/17380697/1725764
— हशेम क़ोलमी
इससे निश्चित रूप से मुझे मदद मिली। यहाँ समाधान jsfiddle.net/T9Bhm/7 धन्यवाद
— गिउलिओ
जब td हाइट्स मैच नहीं करता है तो टेबल-स्ट्राइप्ड विशेषता को सही ढंग से हैंडल नहीं करता है। jsfiddle.net/T9Bhm/4755 जोड़ा गया td देखें {ओवरफ्लो-रैप: ब्रेक-वर्ड; } कि मैंने जोड़ा
— जॉन ज़ब्रोस्की

जवाबों:

257

फिक्स्ड टेबल हेड - सीएसएस-ओनली

बस position: sticky; top: 0;अपने thतत्वों। (क्रोम, एफएफ, एज)

.tableFixHead          { overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>
स्निपेट का विस्तार करें

TH सीमाएँ समस्या को ठीक करती हैं

चूंकि "बॉर्डर्स" को संपत्ति का उपयोग करने के लिए पुन: बनाने और रेंडर करने के लिए borderकिसी अनुवादित THतत्व पर ठीक से पेंट नहीं किया जा सकता है :box-shadow

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}

कोड स्निपेट दिखाएं

फिक्स्ड टेबल हेड - जेएस का उपयोग करना। (अर्थात)

आप जेएस का थोड़ा उपयोग कर सकते हैं और तत्वों का अनुवाद कर सकते thहैं

jQuery का उदाहरण

var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
  $th.css('transform', 'translateY('+ this.scrollTop +'px)');
});
.tableFixHead { overflow-y: auto; height: 100px; }

/* Just common table stuff. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
स्निपेट का विस्तार करें

या सादा ES6 यदि आप चाहें (कोई jQuery की आवश्यकता नहीं):

// Fix table head
function tableFixHead (e) {
    const el = e.target,
          sT = el.scrollTop;
    el.querySelectorAll("thead th").forEach(th => 
      th.style.transform = `translateY(${sT}px)`
    );
}
document.querySelectorAll(".tableFixHead").forEach(el => 
    el.addEventListener("scroll", tableFixHead)
);
— रोको सी। बुल्जन
स्रोत
12
वाह, यह कम से कम ओवरहेड के साथ सबसे अच्छा विकल्प है! और यह बॉक्स के साथ-साथ ओवरफ्लो-एक्स के साथ भी काम करता है।
— काश
1
हाँ! चर कोशिकाओं भी साथ चौड़ाई (अन्य उदाहरण में तरह hardcode सेल चौड़ाई की आवश्यकता नहीं है) काम करता है @Wish
— रोको सी Buljan
2
महान समाधान! धन्यवाद
— दिमित्री निकोर्पेंको
2
मैंने पाया कि यह क्रोम और फ़ायरफ़ॉक्स में काम करता है लेकिन हेडर एज या IE11 में इस दृष्टिकोण का उपयोग करके तय नहीं किया जाएगा।
— जेफ
2
ऊपर दिए गए उदाहरणों में @PussInBoots? क्रोम? कुछ भी नहीं कूदता
— राको सी। बुल्जन
88

संभवतः आपको एक पृष्ठ पर कई सारणियाँ मिलेंगी, इसलिए आपको CSS कक्षाओं की आवश्यकता है। कृपया इसके लिए एक संशोधित @ giulio समाधान खोजें।

बस इसे तालिका में घोषित करें:

<table class="table table-striped header-fixed"></table>

सीएसएस

.header-fixed {
    width: 100% 
}

.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
    display: block;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
    width: 20%;
    float: left;
}

ज्ञात हो कि वर्तमान कार्यान्वयन केवल पाँच स्तंभों पर निर्भर करता है। यदि आपको एक अलग संख्या की आवश्यकता है, तो चौड़ाई पैरामीटर को 20% से * 100% / number_of_columns * में बदलें ।

— एलेक्स क्लॉस
स्रोत
3
सभी विभिन्न जटिल समाधानों का पालन करने के बाद, मुझे लगता है कि यह सबसे अच्छा समाधान है। हालाँकि वर्टिकल स्क्रॉल बार में कुछ चौड़ाई होती है (जो स्पष्ट होती है), लेकिन इसके कारण हेडर और पंक्तियों के बीच थोड़ा सा बेमेल संरेखण होता है। मेरे पास 7 कॉलम हैं, इसलिए मैंने उल्लेख सूत्र का उपयोग करके गणना करने के बाद 14.28% तक की चौड़ाई निर्धारित की है
— चेतन
1
मैं प्रत्येक कॉलम में एक निश्चित चौड़ाई कैसे निर्दिष्ट करूंगा?
— user1807271
@ user1807271 आप जेएस के माध्यम से प्रत्येक कॉलम की चौड़ाई निर्दिष्ट कर सकते हैं, या प्रति कॉलम कॉलम बना सकते हैं (जैसे कि "col1", "col2" और इतने पर) जिस चौड़ाई की आपको आवश्यकता है और प्रथम कॉलम पर सभी कक्षों के लिए वर्ग "col1" असाइन करें। , "कोलो 2" का दूसरा भाग, आदि ..
— ल्यूक
4
मेरा सुझाव है कि आप भी जोड़ें .header-fixed > thead > tr > th{white-space: nowrap;}। यदि हेडर इसे लपेटना शुरू कर देते हैं, तो यह गड़बड़ हो जाता है
— by0
1
यह एकमात्र समाधान है जिसने मेरे लिए काम किया है, मैं इस समस्या से पागल हो रहा था: DI मैं scrollbar-width: none;भौतिकता का उपयोग कर रहा हूं और इस जवाब ने मुझे बहुत मदद की है, इसके अलावा मैंने सौंदर्य कारणों के लिए tbody में जोड़ा है
— एंजल
83

यहाँ काम कर समाधान है:

table {
    width: 100%;
}

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
    </tbody>
</table>
स्निपेट का विस्तार करें

Jsfiddle से लिंक करें

— गिउलिओ
स्रोत
31
IE9 (और शायद अन्य) में काम नहीं करता है; निश्चित-चौड़ाई वाले स्तंभों की आवश्यकता होती है (और यदि आप निश्चित-चौड़ाई वाले स्तंभों का उपयोग करने जा रहे हैं तो बहुत सरल, अधिक क्रॉस-ब्राउज़र समाधान हैं); यदि सामग्री निर्धारित चौड़ाई से अधिक हो तो बुरी तरह से टूट जाती है; वास्तव में हेडर और कॉलम को लाइन नहीं करता है (आप इसे ऊपर दिए गए लिंक में देख सकते हैं ; यह इस संस्करण में स्पष्ट है जो उन्हें एक साधारण सीमा देता है) हालांकि यह शायद तय किया जा सकता है; स्क्रॉलबार टेबल के शरीर के साथ काफी पंक्तिबद्ध नहीं है ...
— टीजे क्राउडर
td और th में एक दृश्य बॉर्डर जोड़ें और आप देखेंगे कि td की चौड़ाई th की चौड़ाई से मेल नहीं खाती
— Apolo
2
इस समाधान के साथ समस्या यह है कि इसे एक निश्चित ऊंचाई की आवश्यकता है। यह काम नहीं करने जा रहा है जहां उत्तरदायी डिजाइन आते हैं। मैं एक ऐसे समाधान पर काम कर रहा हूं जो स्थिति का उपयोग करता है: फिक्स्ड, जो स्क्रॉलिंग समस्या को हल करता है, लेकिन पंक्ति की चौड़ाई को गड़बड़ करता है।
— जेफरी ए। गोचिन
आप मैन्युअल रूप से td और th के लिए चौड़ाई% घोषणा को अलग करके t चौड़ाई को मैन्युअल रूप से मिलान नहीं कर सकते td चौड़ाई को ठीक कर सकते हैं और बस वें को थोड़ा और संकीर्ण होने के लिए सेट कर सकते हैं। आप इसे हर बार कस्टम करेंगे लेकिन यह ऐसा कुछ नहीं है जिसे अक्सर इस्तेमाल किया जाना चाहिए।
— बेन हॉफमैन
मैंने विभिन्न समाधानों के साथ खेलने में एक लंबा समय बिताया और फिर मैं इस प्लगइन पर ठोकर खाई, जो बूटस्ट्रैप 3 (और बूटस्ट्रैप 4) तालिकाओं के साथ भी काम करता है। mkoryak.github.io/floatThead/#intro
— ड्रयू
55

अपडेट करें

नए और अभी भी बनाए रखा पुस्तकालय के लिए jquery.floatThead की कोशिश करें (जैसा कि बॉब जॉर्डन ने टिप्पणी में उल्लेख किया है) इसके बजाय।

पुराना उत्तर

यह एक बहुत पुराना उत्तर है, नीचे बताए गए पुस्तकालय का अब कोई रखरखाव नहीं है।

मैं GitHub पर StickyTableHeaders का उपयोग कर रहा हूं और यह आकर्षण की तरह काम करता है!

हालांकि हेडर को पारदर्शी नहीं बनाने के लिए मुझे इस सीएसएस को जोड़ना पड़ा।

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}
— रोजदी कासिम
स्रोत
9
ध्यान दें कि stickyTableHeaders केवल html पृष्ठ में यह है कि जब ब्राउज़र इसे शुरू में लोड मिलेगा प्लगइन, इसे गतिशील रूप से उत्पन्न सामग्री लेने नहीं होगा
— रोब सिडगविक
3
@RobSedgwick, मैंने यह नहीं किया है, लेकिन यह अभी भी काम करना चाहिए। जब तक आप इनिशियलाइज़ करते हैं तब तक स्टैबलटेबल हेड्र्स के बाद टेबल उत्पन्न होता है। मतलब आप इसे सिर में इनिशियलाइज़ नहीं कर सकते हैं, बल्कि डायनामिक रूप से जेनरेट किए गए टेबल के पूरा होने के बाद इसे इनिशियलाइज़ करें।
— रोजी कासिम
1
विलक्षण समाधान। बहुत सराहना की। अगर किसी को पृष्ठभूमि को अपारदर्शी बनाने में समस्या हो रही है, तो मुझे इसका उपयोग करना होगा .tableFloatingHeaderOriginal { //css }।
— मैट इनामदार
इस प्लगइन को साझा करने के लिए धन्यवाद। बहुत अच्छा काम करता है!
— ब्लेजरुनर44
1
एक वैकल्पिक पुस्तकालय जिसे 2017 तक सक्रिय रूप से बनाए रखा गया है -> github.com/mkoryak/floatThead
— बॉब जॉर्डन
35

यह एक div में लपेट की जरूरत नहीं है ...

सीएसएस :

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

बूटली : http://www.bootply.com/AgI8LpDugl

— बेनार्ड पैट्रिक
स्रोत
position: absoluteपर tbodyमदद की !! धन्यवाद !!
— अनीश नायर
5
यह तब तक बहुत अच्छा लगता है जब तक आपको एहसास न हो जाए कि कॉलम डेटा की चौड़ाई समान है। यदि नहीं तो डेटा शीर्षकों के तहत फिट नहीं होता है।
— शाम
व्यक्तिगत कोशिकाओं के अतिप्रवाह होने पर यह समाधान काम नहीं करता।
— जॉन ज़ब्रोस्की
1
यह क्रोम में काम नहीं करता है, या तो बूटलैप या समाधान।
— केविंक
2
बस टिप्पणी के लिए, यह क्रोम में मेरे लिए काम करता है, तालिका पृष्ठ सामग्री के मध्य शीर्ष पर है .... क्या आप अधिक जानकारी प्रदान कर सकते हैं? (मैं लिनक्स पर हूँ)
— बेनार्ड पैट्रिक
23

यह सीएसएस के साथ आसान है

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }
— एस मेर्ट
स्रोत
1
आप table-layout:fixedजावास्क्रिप्ट के साथ एक CSS वर्ग जोड़कर काबू पा सकते हैं
— user2182349
यह सबसे स्मार्ट दिखता है, लेकिन क्या यह हर जगह काम करता है?
— पेरी
जहां तक ​​मुझे पता है, यह करता है।
— एस। मेर्ट
14

पार्टी के अंत तक (मेरे जीवन की कहानी), लेकिन चूंकि यह Google पर पहला परिणाम है, और उपरोक्त में से कोई भी मुझे काम नहीं मिला, यहां मेरा कोड है

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}
— वी
स्रोत
2
इसने मेरे लिए काम किया लेकिन अब सभी td की चौड़ाई समान है। जो मुझे नहीं चाहिए।
— शुभम् अंक
अद्भुत। साइड नोट: th:nth-child(2), td:nth-child(2)बराबर हैtr > :nth-child(2)
— वाशिंगटन Guedes
1 टिप्पणी का वर्णन करने के लिए कि कैसे टेबल "बकवास की तरह दिखेगी" अगर यह बहुत छोटा हो जाता है, तो मुझे चकली बना दी गई
— माइकल एस। मिलर
11

मेरी नज़र में, jQuery के लिए सबसे अच्छा प्लगइन्स में से एक DataTables है ।

इसमें फिक्स्ड हेडर के लिए एक्सटेंशन भी है , और इसे बहुत आसानी से लागू किया जाता है।

उनकी साइट से लिया गया:

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
  </tbody>
</table>

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

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

लेकिन सिर्फ एक स्क्रॉल करने के लिए आपके पास सबसे सरल <tbody>है:

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});
— KD2ND
स्रोत
उम्मीद तो दिखती है। मैं आज इसे बाद में लागू करने जा रहा हूं और यह देखता हूं कि यह मेरे लिए कैसे काम करता है।
— एंथनी
धन्यवाद, मैंने इसे लागू किया, और यह पूरी तरह से बॉक्स से बाहर काम करता है। मुझे एक व्यावहारिक तालिका की आवश्यकता थी जिसे मोबाइल डिवाइस से प्रबंधित किया जा सकता है, और यह बस यही करता है। हेडर भी चिपक गया।
— फ्लोरिडा जी।
मैं चाहता हूं कि पहला कॉलम और हेडर दोनों निश्चित हो जाएं जो डेटा टेबल संगतता चार्ट के अनुसार संभव नहीं है
— PirateApp
मैं यह बहुत अच्छा प्रभाव के लिए इस्तेमाल किया। कुछ मामलों में थोड़ा स्पष्ट रूप से देखा, लेकिन यह सीएसएस के साथ मेरी अनुभवहीनता हो सकती है।
— डेविड ब्रैडले
5

नवीनतम जोड़ स्थिति: 'चिपचिपा' यहां सबसे सरल समाधान होगा

.outer{
    overflow-y: auto;
    height:100px;
    }

.outer table{
    width: 100%;
    table-layout: fixed; 
    border : 1px solid black;
    border-spacing: 1px;
}

.outer table th {
        text-align: left;
        top:0;
        position: sticky;
        background-color: white;  
}
 <div class = "outer">
 <table>
             <tr >
              <th>col1</th>
              <th>col2</th>
              <th>col3</th>
              <th>col4</th>
               <th>col5</th>
             <tr>
                       
            <tr >
              <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
               <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
 </table>
 </div>
स्निपेट का विस्तार करें

— voddy
स्रोत
1
प्यारा और उपयोगी
— मिगुएल ऑर्टिज़
5 

table {
    overflow-y: auto;
    height: 50vh;     /* !!!  HEIGHT MUST BE IN [ vh ] !!! */
}

thead th {
    position: sticky;
    top: 0;
}
   <table>
      <thead>
        <tr><th>TH 1</th><th>TH 2</th></tr>
      </thead>
      <tbody>
        <tr><td>A1</td><td>A2</td></tr>
        <tr><td>B1</td><td>B2</td></tr>
        <tr><td>C1</td><td>C2</td></tr>
        <tr><td>D1</td><td>D2</td></tr>
        <tr><td>E1</td><td>E2</td></tr>
        <tr><td>F1</td><td>F2</td></tr>
        <tr><td>G1</td><td>G2</td></tr>
        <tr><td>H1</td><td>H2</td></tr>
        <tr><td>I1</td><td>I2</td></tr>
        <tr><td>J1</td><td>J2</td></tr>
        <tr><td>K1</td><td>K2</td></tr>
        <tr><td>L1</td><td>L2</td></tr>
        <tr><td>M1</td><td>M2</td></tr>
        <tr><td>N1</td><td>N2</td></tr>
        <tr><td>O1</td><td>O2</td></tr>
        <tr><td>P1</td><td>P2</td></tr>
        <tr><td>Q1</td><td>Q2</td></tr>
        <tr><td>R1</td><td>R2</td></tr>
        <tr><td>S1</td><td>S2</td></tr>
        <tr><td>T1</td><td>T2</td></tr>
        <tr><td>U1</td><td>U2</td></tr>
        <tr><td>V1</td><td>V2</td></tr>
        <tr><td>W1</td><td>W2</td></tr>
        <tr><td>X1</td><td>X2</td></tr>
        <tr><td>Y1</td><td>Y2</td></tr>
        <tr><td>Z1</td><td>Z2</td></tr>
      </tbody>
    </table>
स्निपेट का विस्तार करें

आपको js की आवश्यकता नहीं है। [ Vh ] में टेबल की ऊंचाई निर्धारित करना महत्वपूर्ण है

— TomDom
स्रोत
3

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

— बॉब जॉर्डन
स्रोत
2

आपको "प्रदर्शन: ब्लॉक;" के साथ प्रयास करना चाहिए। tbody, क्योंकि अब यह इनलाइन-ब्लॉक है और ऊंचाई सेट करने के लिए, तत्व "ब्लॉक" होना चाहिए

— वाल्टर मैयर
स्रोत
प्रदर्शन: ब्लॉक आवश्यक था, लेकिन फिर मुझे फ्लोट भी रखना पड़ा: बाएं और सभी सेल के लिए एक उचित चौड़ाई। मैंने जो समाधान पोस्ट किया है वह अब काम कर रहा है।
— जियालियो
2

बूटस्ट्रैप तालिका के लिए पहले कुछ मार्कअप जोड़ें। यहां मैंने एक धारीदार तालिका बनाई है, लेकिन एक कस्टम टेबल क्लास भी जोड़ा है .table-scrollजो टेबल पर वर्टिकल स्क्रॉल बार जोड़ता है और नीचे स्क्रॉल करते समय टेबल हेडर तय करता है।

<div class="col-xs-8 col-xs-offset-2 well">
    <table class="table table-scroll table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>County</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Andrew</td>
                <td>Jackson</td>
                <td>Washington</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Thomas</td>
                <td>Marion</td>
                <td>Jackson</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Benjamin</td>
                <td>Warren</td>
                <td>Lincoln</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Grant</td>
                <td>Wayne</td>
                <td>Union</td>
            </tr>
            <tr>
                <td>5</td>
                <td>John</td>
                <td>Adams</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Morgan</td>
                <td>Lee</td>
                <td>Lake</td>
            </tr>
            <tr>
                <td>7</td>
                <td>John</td>
                <td>Henry</td>
                <td>Brown</td>
            </tr>
            <tr>
                <td>8</td>
                <td>William</td>
                <td>Jacob</td>
                <td>Orange</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Kelly</td>
                <td>Davidson</td>
                <td>Taylor</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Randolph</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Rhona</td>
                <td>Herrod</td>
                <td>Cumberland</td>
            </tr>
            <tr>
                <td>12</td>
                <td>Jane</td>
                <td>Paul</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>13</td>
                <td>Ashton</td>
                <td>Fox</td>
                <td>Calhoun</td>
            </tr>
            <tr>
                <td>14</td>
                <td>Garrett</td>
                <td>John</td>
                <td>Madison</td>
            </tr>
            <tr>
                <td>15</td>
                <td>Fredie</td>
                <td>Winters</td>
                <td>Washington</td>
            </tr>
        </tbody>
    </table>
</div>

सीएसएस

.table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
}

.table-scroll tr {
    width: 100%;
    table-layout: fixed;
    display: inline-table;
}

.table-scroll thead > tr > th {
    border: none;
}
— core114
स्रोत
2

मैंने फ्लोटहेड jQuery प्लगइन ( https://mkoryak.github.io/floatThead/#intint/ ) का उपयोग किया

डॉक्स का कहना है कि यह बूटस्ट्रैप 3 टेबल्स के साथ काम करता है और मैं कह सकता हूं कि यह बूटस्ट्रैप 4 टेबलों के साथ या टेबल-रिस्पॉन्सिबल टॉपर के साथ भी काम करता है।

प्लगइन का उपयोग करना इस रूप में सरल है:

HTML (वेनिला बूटस्ट्रैप टेबल मार्कअप)

<div class="table-responsive">
   <table id="myTable" class="table table-striped">
        <thead>...</thead>
        <tbody>...</tbody>
   </table>
</div>

प्लगइन प्रारंभिक:

$(document).ready(function() {
    var tbl=$('#myTable');
    tbl.floatThead({
        responsiveContainer: function(tbl) {
            return tbl.closest('.table-responsive');
        }
    });
});

पूर्ण अस्वीकरण: मैं किसी भी तरह से प्लगइन से जुड़ा नहीं हूं। मैं इसे यहाँ और अन्य जगहों पर पोस्ट किए गए कई अन्य समाधानों की कोशिश करने के घंटों के बाद इसे खोजने के लिए हुआ।

— ड्रयू
स्रोत
1
यह एक महान प्लगइन है! पूर्ण अस्वीकरण: मैंने इसे लिखा था।
— मकोरिया
1

जो कुछ भी यह अब लायक के लिए: मैं एक बहन-धागा के लिए एक समाधान पोस्ट किया HTML और सीएसएस के साथ टेबल पुस्तक जो

  • दो तालिकाएँ (केवल हेडर के लिए एक, सभी के लिए एक - ब्राउज़र द्वारा लेआउट)
  • लेआउट करने के बाद, ऊपरी (हेडर-ओनली) टेबल को निचले एक की चौड़ाई में समायोजित करें
  • निचली तालिका के शीर्षलेख ( visibilityऔर नहीं display) को छिपाएँ और एक तालिका में निम्न तालिका को स्क्रॉल करने योग्य w / बनायें

समाधान किसी भी शैली / रूपरेखा के लिए अज्ञेय है - तो शायद यह यहाँ भी उपयोगी है ...

HTML और CSS के साथ टेबल स्क्रॉल में एक लंबा विवरण है । कोड इस पेन में भी है: https://codepen.io/sebredhh/pen/QmJvKy

— सेबस्टियन रोथबुचेर
स्रोत
1

पूर्ण ऊँचाई वाली तालिकाओं के लिए (पृष्ठ स्क्रॉल करता है, तालिका नहीं)

नोट: मैं पूरी <thead>...</thead>बीम को स्थानांतरित करता हूं मेरे मामले में मेरी दो पंक्तियाँ थीं (शीर्षक और फ़िल्टर)

JS (jQuery) के साथ

$( function() {

            let marginTop = 0; // Add margin if the page has a top nav-bar
            let $thead = $('.table-fixed-head').find('thead');
            let offset = $thead.first().offset().top - marginTop;
            let lastPos = 0;

            $(window).on('scroll', function () {

                if ( window.scrollY > offset )
                {
                    if ( lastPos === 0 )
                    {
                        // Add a class for styling
                        $thead.addClass('floating-header');
                    }

                    lastPos = window.scrollY - offset;
                    $thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
                }
                else if ( lastPos !== 0 )
                {
                    lastPos = 0;
                    $thead.removeClass('floating-header');
                    $thead.css('transform', 'translateY(' + 0 + 'px)');
                }
            });
});

सीएसएस (सिर्फ स्टाइल के लिए)

 thead.floating-header>tr>th {
       background-color: #efefef;
 }

thead.floating-header>tr:last-child>th {
       border-bottom: 1px solid #aaa;
}
— antman3351
स्रोत
1

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

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

बहु-पंक्ति हेडर समर्थन उपलब्ध है, और विशेष रूप से प्रभावी है यदि तालिका WCAC दिशानिर्देशों में निर्दिष्ट के रूप में पहुंच के लिए आईडी / हेडर विशेषताओं का उपयोग करती है , जो कि एक आवश्यकता के रूप में उतनी आवश्यकता नहीं है जितनी यह लग सकती है।

कोड किसी भी लाइब्रेरी पर निर्भर नहीं करता है, लेकिन यदि उनका उपयोग किया जा रहा है तो उनके साथ अच्छी तरह से खेलता है। (JQuery का उपयोग करने वाले पृष्ठों पर परीक्षण किया गया)।

कोड और नमूना उपयोग Github पर उपलब्ध हैं ।

— क्रिस्टोफर विकी
स्रोत
0

आप दो div रख सकते हैं जहाँ 1st div (Header) में पारदर्शी स्क्रॉल बार होगा और 2nd div में दृश्यमान / ऑटो स्क्रॉल बार के साथ डेटा होगा। नमूना में डेटा के माध्यम से लूपिंग के लिए कोणीय कोड स्निपेट है।

नीचे दिए गए कोड ने मेरे लिए काम किया -

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="col-lg-3 col-xs-3">{{row.col3}}</div>
        </div>
    </div>
</div>

हेडर स्क्रॉल बार को छिपाने के लिए अतिरिक्त शैली -

<style>
        #transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */

        #transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */

        #transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */

        #transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

        #transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>
— प्रतीक राय
स्रोत
0

यहाँ स्क्रॉल कोड और कॉलम के साथ फिक्स्ड टेबल हेडर बनाने के तरीके के बारे में बताया गया है। कॉलम भी निश्चित चौड़ाई, http://codepen.io/abhilashn/pen/GraJyp हैं

<!-- Listing table -->
        <div class="row">
            <div class="col-sm-12">
                <div class="cust-table-cont">
                <div class="table-responsive">
                  <table border="0" class="table cust-table"> 
                    <thead>
                        <tr style="">
                          <th style="width:80px;">#</th> 
                          <th style="width:150px;" class="text-center"><li class="fa fa-gear"></li></th>  
                          <th style="width:250px;">Title</th>  
                          <th style="width:200px;">Company</th> 
                          <th style="width:100px;">Priority</th> 
                          <th style="width:120px;">Type</th>     
                          <th style="width:150px;">Assigned to</th> 
                          <th style="width:120px;">Status</th> 
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th style="width:80px;">1</th>
                          <td style="width:150px;" class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td style="width:250px;">Lorem ipsum dolor sit</td>
                          <td style="width:200px;">lorem ispusm</td>
                          <td style="width:100px;">high</td>
                          <td style="width:120px;">lorem ipsum</td>
                          <td style="width:150px;">lorem ipsum</td>
                          <td style="width:120px;">lorem ipsum</td>
                        </tr>

                        <tr>
                          <th scope="row">2</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">3</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">4</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">5</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">6</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">7</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">8</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">9</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">10</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">11</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">12</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                    </tbody>
                  </table>
                </div>
                </div> <!-- End of cust-table-cont block -->
            </div>
        </div> <!-- ENd of row -->

.cust-table-cont { width:100%; overflow-x:auto; } 
.cust-table-cont .table-responsive { width:1190px;  }
.cust-table { table-layout:fixed;  } 
.cust-table thead, .cust-table tbody { 
display: block;
}
.cust-table tbody { max-height:620px; overflow-y:auto; }
स्निपेट का विस्तार करें

— अभिलाष नारायण
स्रोत
0

क्लीनर समाधान (केवल सीएसएस)

.table-fixed tbody {
    display:block;
    height:85vh;
    overflow:auto;
}
.table-fixed thead, .table-fixed tbody tr {
    display:table;
    width:100%;
}


<table class="table table-striped table-fixed">
    <thead>
        <tr align="center">
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
        </tr>
        <tr>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
        </tr>
    </tbody
</table
— user3468235
स्रोत
0

एकल विंडो में एकाधिक स्क्रॉल करने योग्य तालिका समर्थन।

शुद्ध CSS & कोई निश्चित या चिपचिपा नहीं।

मैं वर्षों से ऑटो "td" और "th" चौड़ाई के साथ निश्चित टेबल हैडर खोज रहा हूं। अंत में मैंने कुछ कोडित किया, यह मेरे लिए अच्छा है लेकिन मुझे यकीन नहीं है कि यह सभी के लिए अच्छा है।

समस्या 1: हम टेबल या tbody ऊंचाई सेट नहीं कर सकते हैं जबकि "tr" के टन हैं क्योंकि यह डिफ़ॉल्ट तालिका गुणों के कारण है।

समाधान: तालिका को एक प्रदर्शन गुण सेट करें।

समस्या 2: जब हम एक प्रदर्शन गुण सेट करते हैं, तो "td" तत्वों की चौड़ाई "th" तत्वों की समान चौड़ाई नहीं हो सकती। और 100% जैसे पूर्ण चौड़ाई तालिका में तत्वों को ठीक से भरना मुश्किल है।

समाधान: सीएसएस "फ्लेक्स" चौड़ाई के लिए बहुत अच्छा समाधान है और सेट-अप को भरता है, इसलिए हम सीएसएस "फ्लेक्स" के साथ हमारे tbody और thead तत्वों का निर्माण करेंगे।

.ea_table {
  border: 1px solid #ddd;
  display: block;
  background: #fff;
  overflow-y: hidden;
  box-sizing: border-box;
  float: left;
  height:auto;
  width: 100%;
}

.ea_table tbody, thead {
  flex-direction: column;
  display: flex;
}

.ea_table tbody {
  height: 300px;
  overflow: auto;
}

.ea_table thead {
  border-bottom: 1px solid #ddd;
}

.ea_table tr {
  display: flex;
}


.ea_table tbody tr:nth-child(2n+1) {
  background: #f8f8f8;
  }

.ea_table td, .ea_table th {
  text-align: left;
  font-size: 0.75rem;
  padding: 1.5rem;
  flex: 1;
}
<table class="ea_table">
    <thead>
      <tr>
        <th>Something Long</th>
        <th>Something </th>
        <th>Something Very Long</th>
        <th>Something Long</th>
        <th>Some</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>

    </tbody>

  </table>
स्निपेट का विस्तार करें

jsfiddle

— एर्सेल अकटस
स्रोत
0 
<style>

thead, tbody
{
    display: block;
}

tbody 
{
   overflow: auto;
   height: 100px;
}

th,td
{
    width: 120px;
}

</style>

<table class="table table-bordered table-striped">
    <thead style="background-color:lightgreen">
        <tr>
            <th>Id</th><th>Name</th><th>Roll</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
    </tbody>
</table>
— एमडी शाहियार
स्रोत
-1

इस लिंक का इस्तेमाल, stackoverflow.com/a/17380697/1725764 , मूल पोस्ट्स की टिप्पणियों और उपयोग किए गए डिस्प्ले पर हैशम कोलोमी द्वारा: फ्लोट्स के बजाय इनलाइन-ब्लॉक। सीमाएँ ठीक करता है यदि तालिका में वर्ग 'टेबल बॉर्डर' भी है।

table.scroll {
  width: 100%;  
  &.table-bordered {
    td, th {
      border-top: 0;
      border-right: 0;
    }    
    th {
      border-bottom-width: 1px;
    }
    td:first-child,
    th:first-child {
      border-right: 0;
      border-left: 0;
    }
  }
  tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;  
  }
  tbody, thead {
    display: block;
  }
  tr {
    width: 100%;
    display: block;
  }
  th, td {
    display: inline-block;

  }
  td {
    height: 46px; //depends on your site
  }
}

फिर बस td और th की चौड़ाई जोड़ें

table.table-prep {
  tr > td.type,
  tr > th.type{
    width: 10%;
  }
  tr > td.name,
  tr > th.name,
  tr > td.notes,
  tr > th.notes,
  tr > td.quantity,
  tr > th.quantity{
    width: 30%;
  }
}
— juppee
स्रोत
-1

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

— Dzintars
स्रोत
-1

एचटीएमएल

<!DOCTYPE html>
<html>
<head>
    <title>RoboPage</title>
    <link rel="stylesheet" type="text/css" href="practice.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

        <div class="container">
                <table class="table">
                  <thead>
                    <tr>
                      <th class="col-md-3 col-sm-3 ">First Name</th>
                      <th class="col-md-3 col-sm-3 ">Last Name</th>
                      <th class="col-md-6 col-sm-6 ">E-mail</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="col-md-3 col-sm-3">Top Row</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>

                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                  </tbody>
                </table>
              </div>


<script src='practice.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

सीएसएस

thead,tbody,tr,td,th{
    display:block;
}
tbody{
    height:200px;
    overflow-y:auto;
    width: 100%;
}
thead > tr > th, tbody > tr > td{
    float:left;
}
— नितेश वुप्पला
स्रोत
-1

निश्चित चौड़ाई के बिना एक आसान तरीका:

.myTable tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.myTable thead tr{
  display:block;
}

स्रोत

अब, onLoad पर, वें चौड़ाई को समायोजित करने के लिए, बस इस jquery स्क्रिप्ट को जोड़ें:

$.each($('.myTable tbody tr:nth(0) td'), function(k,v) {
    $('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
});
— mauretto
स्रोत
-2

स्क्रॉल करने योग्य तालिका को लंबवत बनाने के लिए इस तरह से div के अंदर तालिका रखें। क्षैतिज रूप से तालिका स्क्रॉल करने योग्य बनाने के overflow-yलिए परिवर्तन overflow-x। बस overflowक्षैतिज और ऊर्ध्वाधर दोनों को स्क्रॉल करने योग्य बनाने के लिए।

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>
— इकबाल प्रतिमो संतसो
स्रोत
-2 

table {

    display: block;
}

thead, tbody {
    display: block;
}
tbody {
    position: absolute;
    height: 150px;
    overflow-y: scroll;
}
td, th {
    min-width: 100px !important;
    height: 25px !important;
    overflow:hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container" style="position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden">


<table>
         <thead>
        <tr>
             <th>Col1</th>
            <th>Col2</th>
            <th>Username</th>
            <th>Password</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Col16</th>
            <th>Col7</th>
            <th>Col8</th>
            <th>Col9</th>
            <th>Col10</th>
            <th>Col11</th>
            <th>Col12</th>
            <th>Col13</th>
            <th>Col14</th>
            <th>Col15</th>
            <th>Col16</th>
            <th>Col17</th>
            <th>Col18</th>
        </tr>
              </thead>
         <tbody>
         </tbody>
          <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
          
                    <tr>
          <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
            <td>Long Value</td>
                      <td>Title</td>
          </tr>
         </table>



</div>`enter code here`
स्निपेट का विस्तार करें

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