उपयोगकर्ता द्वारा इसे jQuery के साथ स्क्रॉल करने पर शीर्ष पर स्थिर रहने के लिए तालिका शीर्ष लेख

145

मैं एक HTML तालिका डिज़ाइन करने का प्रयास कर रहा हूं, जहां शीर्षलेख पृष्ठ के शीर्ष पर रहेगा जब उपयोगकर्ता केवल इसे स्क्रॉल करके देखेगा। उदाहरण के लिए, तालिका पृष्ठ से 500 पिक्सेल नीचे हो सकती है, मैं इसे कैसे बनाऊं ताकि यदि उपयोगकर्ता शीर्ष लेख को स्क्रॉल करता है (ब्राउज़र किसी भी तरह अब विंडो दृश्य में पता लगाता है), यह शीर्ष पर रखा जाएगा ? किसी ने मुझे एक जावास्क्रिप्ट समाधान इस के लिए दे सकते हैं?

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

इसलिए उपरोक्त उदाहरण में, मैं <thead>पृष्ठ को स्क्रॉल करना चाहता हूं यदि यह देखने से बाहर जाता है।

महत्वपूर्ण: मैं एक समाधान की तलाश नहीं कर रहा हूं जहां <tbody>एक स्क्रॉलबार (अतिप्रवाह: ऑटो) होगा।

jquery  html  html-table 
— सैम डुफेल
स्रोत
2
— ब्रैड टॉफेल
— स्वस्तिक राज घोष
मैंने एक और प्रश्न के लिए इसका उत्तर दिया, कृपया देखें। stackoverflow.com/a/56764334/9388978
— Ersel Aktas

जवाबों:

131

आप scrollईवेंट हैंडलर पर टैप करके windowऔर tableपेज के शीर्ष पर हेडर दिखाने के लिए एक निश्चित स्थिति के साथ दूसरे का उपयोग करके ऐसा कुछ करेंगे ।

HTML:

<table id="header-fixed"></table>

सीएसएस:

#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

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

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

यह तालिका सिर को दिखाएगा जब उपयोगकर्ता मूल तालिका सिर को छिपाने के लिए काफी नीचे स्क्रॉल करता है। यह तब फिर से छिप जाएगा जब उपयोगकर्ता ने पृष्ठ को बहुत दूर तक फिर से स्क्रॉल किया है।

काम करने का उदाहरण: http://jsfiddle.net/andrewwhitaker/fj8wM/

— एंड्रयू व्हाइटेकर
स्रोत
60
मैं यह सोच रहा था लेकिन क्या होगा यदि हेडर कॉलम की चौड़ाई सामग्री के आधार पर बदल जाए? जब तक कॉलम की चौड़ाई तय नहीं हो जाती तब तक आप अपनी हेडर पंक्ति को सामग्री पंक्तियों के साथ पंक्तिबद्ध नहीं कर सकते। सिर्फ एक विचार।
— यजीर रामिरेज़
16
यदि कॉलम हेडर्स के नाम कॉलम डेटा वैल्यू से कम हैं, तो यह उदाहरण काम नहीं करता है। जानकारी के बजाय infoooooooo जैसे मान रखने के लिए उस फील को बदलने की कोशिश करें। मैं किसी प्रकार की हार्डकोड की चौड़ाई के बारे में सोच रहा हूं जो तालिका को क्लोन करते समय सेट की गई है।
— whiterook6
6
इसकी प्रमुख सीमाएँ हैं, जिनमें से कम से कम एक कंटेनर में टेबल का उपयोग करने की कोशिश की जाती है window। mkoryak.github.io/floatThead में अधिक सामान्यतः लागू समाधान है।
— युक
13
यह किसी को भी गतिशील वें चौड़ाई की आवश्यकता में मदद कर सकता है, यह जो मैं कर रहा हूं वह घाव है, यह @AndrewWhitaker का एक कांटा है: jsfiddle.net/noahkoch/wLcjh/1
— नूह कोच
1
@NoahKoch आपके समाधान का उपयोग करके हेडर तय कर सकता है फिर भी मूल सिर जितना चौड़ा नहीं हो सकता जब मूल कोशिकाओं में पैडिंग हो। मैंने डुप्लिकेटेड कोशिकाओं में पैडिंग जोड़ने के लिए आपके समाधान में सुधार किया। JSFiddle का कांटा: jsfiddle.net/1n23m69u/2
— fandasson
46

ठीक है, मैं निश्चित आकार के स्तंभों का सहारा लिए बिना या पूरी तालिका के लिए एक निश्चित ऊंचाई होने के बिना एक ही प्रभाव प्राप्त करने की कोशिश कर रहा था।

मैं जिस समाधान के साथ आया वह हैक है। इसमें संपूर्ण तालिका को डुप्लिकेट करना और फिर सब कुछ छिपाना, लेकिन हेडर और बनाना एक निश्चित स्थिति है।

एचटीएमएल

<div id="table-container">
<table id="maintable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>some really long line here instead</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
                <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
                <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>
<div id="bottom_anchor"></div>
</div>

सीएसएस

body { height: 1000px; }
thead{
    background-color:white;
}

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

function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll>anchor_top && scroll<anchor_bottom) {
    clone_table = $("#clone");
    if(clone_table.length == 0){
        clone_table = $("#maintable").clone();
        clone_table.attr('id', 'clone');
        clone_table.css({position:'fixed',
                 'pointer-events': 'none',
                 top:0});
        clone_table.width($("#maintable").width());
        $("#table-container").append(clone_table);
        $("#clone").css({visibility:'hidden'});
        $("#clone thead").css({'visibility':'visible','pointer-events':'auto'});
    }
    } else {
    $("#clone").remove();
    }
}
$(window).scroll(moveScroll);

यहां देखें: http://jsfiddle.net/QHQGF/7/

संपादित करें: कोड को अपडेट किया ताकि थ्रेड पॉइंटर इवेंट प्राप्त कर सकें (हेडर में बटन और लिंक अभी भी काम करते हैं)। यह luhfluh और जो एम द्वारा रिपोर्ट की गई समस्या को ठीक करता है।

यहाँ नया jsfiddle: http://jsfiddle.net/cjKEx/

— एन्ट्रापी
स्रोत
3
मैंने कोशिश की कि पहले, इसके साथ समस्या यह है कि हेडर में तत्वों का आकार तालिका की सामग्री पर निर्भर करता है। यदि आपके पास बड़ी सामग्री वाली एक पंक्ति है, तो हेडर सहित पूरा कॉलम बढ़ेगा। यदि आप क्लोन को केवल उस जानकारी को खो देते हैं और आपको वांछित प्रभाव नहीं मिलता है। स्वीकार किए गए उत्तर पर यज़ीम रामिरेज़ की टिप्पणी देखें। यह एकमात्र तरीका है जो मैंने पाया कि निश्चित चौड़ाई के कॉलम के बिना काम करता है। यह साफ नहीं है, मुझे पता है, जो मैं कह रहा हूं कि यह एक हैक था।
— एंट्रोपी
1
ओहह मैं समझ गया। यह तरीका बहुत अच्छा है क्योंकि यह द्रव स्तंभों के साथ काम करता है, मैं थोड़ा गुगली करता हूं और उस कार्यक्षमता के साथ एक और नहीं मिल सकता। वैसे भी, अगर मैं इसे किसी भी तरह से पूरा कर लूँगा, तो मैं यहाँ इसका उल्लेख करूँगा
— M2_
1
@luhfluh, हाँ, समस्या सूचक घटनाओं की वजह से थी: क्लोन की गई तालिका में कोई भी नहीं। इसका उपयोग इसलिए किया जाता है ताकि क्लिक क्लोन और मूल तालिका से गुजरें। क्लोन तालिका के हेडर में इसे बदलना ताकि हेडर (और केवल हेडर) क्लिक करने योग्य हो, समस्या को ठीक करता है। मैंने इस पोस्ट को प्रतिबिंबित करने के लिए अपनी पोस्ट को अपडेट किया है :)
— एन्ट्रापी
4
बॉर्डर जोड़ने पर समस्या <thead> <th>
— Jam Ville
1
@ जैमविल क्योंकि क्लोन टेबल है visibility: hidden। आप केवल #clone tbodyऔर उसके बाद छिपा सकते हैं कि आप सीमा निर्धारित कर सकते हैं ... वर्किंग
— फ़िडल
46

शुद्ध CSS (IE11 समर्थन के बिना):

table th {
    position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}
— इहोर जेनिच
स्रोत
1
मैं क्रोम में भी यह काम नहीं कर रहा हूँ। निरीक्षण उपकरण के -webkit-stickyलिए एक अमान्य मान के रूप में दिखाते हैं position।
— कार्मिकवाद
@carmenism -webkit-stickySafari (डेस्कटॉप और iOS) के लिए है, क्रोम के लिए नहीं। position: sticky56 से क्रोम में काम करता है। आपको बीओटीएच नियम निर्धारित करना चाहिए: -webkit-stickyऔर stickyठीक उसी क्रम में जैसा मेरे कोड उदाहरण में है। सफ़ारी मिलती है webkit-stickyऔर अन्य सभी ब्राउज़र इसके साथ अधिलेखित हो जाते हैं sticky।
— इहोर ज़ेनिच
2
मैं यह काम करने में असमर्थ था। एक त्वरित Google से ऐसा लगता है कि position: stickyटेबल तत्वों के साथ काम नहीं करेगा।
— rjh
3
मेरे लिए काम करने के लिए आवेदन: टेबल थ्रेड tr वें {...}
— नर्स
1
आपको इसे वें पर लागू करना होगा क्योंकि यह थ्रेड पर काम नहीं करेगा और न ही tr
— helado
26

मैंने एक प्लगइन लिखा है जो ऐसा करता है। Ive अब लगभग एक साल से इस पर काम कर रहा है और मुझे लगता है कि यह सभी कोने के मामलों को अच्छी तरह से संभालता है:

  • ओवरफ्लो के साथ एक कंटेनर के भीतर स्क्रॉल करना
  • एक खिड़की के भीतर स्क्रॉलिंग
  • खिड़की का आकार बदलने पर क्या होता है, इसका ख्याल रखना
  • अपनी घटनाओं को हेडर से बांधे रखना
  • सबसे महत्वपूर्ण बात यह है कि यह काम करने के लिए आपको अपनी तालिका के सीएसएस को बदलने के लिए मजबूर नहीं करता है

यहाँ कुछ डेमो / डॉक्स दिए गए हैं:
http://mkoryak.github.io/floatThead/

— mkoryak
स्रोत
महान प्रयास, लेकिन IE 10 के साथ काम नहीं करता है और फ़ायरफ़ॉक्स 23 / ubuntu पर खिड़कियों के आकार बदलने पर कुछ quirks है।
— जिन्न
2
FYI करें: मैंने आईई 9 और 10 के साथ नवीनतम संस्करण में मुद्दों को तय किया।
— mkoryak
2
क्या आप एक ऐसा संस्करण बना सकते हैं जिसमें jQuery की आवश्यकता न हो?
— कर्टिस डब्ल्यू
2
शायद इसलिए कि वह jquery का उपयोग नहीं करता है ... और नहीं - मैं एक ऐसा संस्करण नहीं बनाऊँगा जो jquery का उपयोग नहीं करता है।
— मोर्यक
1
मैं एक साधारण jQery टेबुलर प्लगइन का उपयोग करता हूं और आपके अकसर किये गए सवाल के अकॉर्डिंग में आपका प्लगइन #sortable td {..} और जैसे कई CSS नियमों को पसंद नहीं करता है। मैंने थोड़ा ट्विक करने की कोशिश की लेकिन मैं इसे काम नहीं कर पाया।
— माछी
25

मैं कॉलम की चौड़ाई बदलने के साथ समस्या को ठीक करने में सक्षम था। मैंने ऊपर एंड्रयू के समाधान के साथ शुरू किया (बहुत बहुत धन्यवाद!) और फिर क्लोन किए गए सीडी की चौड़ाई को सेट करने के लिए एक छोटा सा लूप जोड़ा गया:

$("#header-fixed td").each(function(index){
    var index2 = index;
    $(this).width(function(index2){
        return $("#table-1 td").eq(index).width();
    });
});

यह पूरी तालिका को क्लोन किए बिना और शरीर को छिपाने के बिना समस्या को हल करता है। मैं जावास्क्रिप्ट और jQuery (और अतिप्रवाह ढेर करने के लिए) के लिए नया हूँ, इसलिए किसी भी टिप्पणी की सराहना की है।

— rockusbacchus
स्रोत
4
अच्छी तरह से काम किया है, लेकिन मुझे निम्नलिखित लाइन $ ("# हेडर-फिक्स्ड") जोड़ने की आवश्यकता है। चौड़ाई ($ ("# टेबल -1")। चौड़ाई ()); स्तंभों को सही ढंग से पंक्तिबद्ध करने के लिए।
— इल्या फेडोटोव
17

यह अब तक का सबसे अच्छा समाधान है जो मैंने एक निश्चित तालिका हेडर के लिए पाया है।

अद्यतन 5/11: केरी जॉनसन द्वारा बताया गया के रूप में फिक्स्ड क्षैतिज स्क्रॉलिंग बग

कोडपेन: https://codepen.io/josephting/pen/demELL

;(function($) {
   $.fn.fixMe = function() {
      return this.each(function() {
         var $this = $(this),
            $t_fixed;
         function init() {
            $this.wrap('<div class="container" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
         }
         function resizeFixed() {
           $t_fixed.width($this.outerWidth());
            $t_fixed.find("th").each(function(index) {
               $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
            });
         }
         function scrollFixed() {
            var offsetY = $(this).scrollTop(),
            offsetX = $(this).scrollLeft(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(),
            tableOffsetLeft = $this.offset().left;
            if(offsetY < tableOffsetTop || offsetY > tableOffsetBottom)
               $t_fixed.hide();
            else if(offsetY >= tableOffsetTop && offsetY <= tableOffsetBottom && $t_fixed.is(":hidden"))
               $t_fixed.show();
            $t_fixed.css("left", tableOffsetLeft - offsetX + "px");
         }
         $(window).resize(resizeFixed);
         $(window).scroll(scrollFixed);
         init();
      });
   };
})(jQuery);

$(document).ready(function(){
   $("table").fixMe();
   $(".up").click(function() {
      $('html, body').animate({
      scrollTop: 0
   }, 2000);
 });
});
body{
  font:1.2em normal Arial,sans-serif;
  color:#34495E;
}

h1{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:-2px;
  font-size:2.5em;
  margin:20px 0;
}

.container{
  width:90%;
  margin:auto;
}

table{
  border-collapse:collapse;
  width:100%;
}

.blue{
  border:2px solid #1ABC9C;
}

.blue thead{
  background:#1ABC9C;
}

.purple{
  border:2px solid #9B59B6;
}

.purple thead{
  background:#9B59B6;
}

thead{
  color:white;
}

th,td{
  text-align:center;
  padding:5px 0;
}

tbody tr:nth-child(even){
  background:#ECF0F1;
}

tbody tr:hover{
background:#BDC3C7;
  color:#FFFFFF;
}

.fixed{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}

.scrollMore{
  margin-top:600px;
}

.up{
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>&darr; SCROLL &darr;</h1>
<table class="blue">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Non</td>
      <td>MaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMaisMais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
  </tbody>
</table>

<h1 class="scrollMore">&darr; SCROLL MORE &darr;</h1>
<table class="purple">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
    <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
       <tr>
      <td>Non</td>
      <td>Mais</td>
      <td>Allo !</td>
    </tr>
  </tbody>
</table>
<h1 class="up scrollMore">&uarr; UP &uarr;</h1>
स्निपेट का विस्तार करें

— josephting
स्रोत
मैंने इस स्क्रिप्ट को ठीक किया ताकि यह <th> तत्वों को संभाल सके जिसमें सीमा और पैडिंग है (अन्यथा यह निश्चित हेडर सेट करता है <th> चौड़ाई बहुत व्यापक है)। सीधे शब्दों में बदलने outerWidthके लिए widthresizeFixed () फ़ंक्शन परिभाषा।
— alanng
आपको क्लास में z-indexकुछ पॉजिटिव नंबर के सीएसएस प्रॉपर्टी को भी जोड़ना पड़ सकता है .fixedताकि आपके द्वारा स्क्रॉल किए जाने के साथ ही टेबल में पोस्ट-पेलगोलाड की वस्तुओं को तय किए गए हेडर के ऊपर तैरना न पड़े।
— एलन
सरल और उपयोगी।
— रिची डी
कैसे गतिशील रूप से शीर्ष स्थिति को संभालना है। मान लीजिए, मुझे अपने मुख्य पृष्ठ फिक्स्ड हेडर कंटेंट के नीचे स्क्रॉल करना होगा। उपसर्ग {शीर्ष: 0;} ।
— विजयविष्णु
2
@KerryJohnson नोट के लिए धन्यवाद। मैंने कुछ बदलाव किए हैं, इसलिए यह क्षैतिज स्क्रॉलिंग और डायनेमिक कॉलम चौड़ाई का समर्थन करता है।
— josephting
7

सबसे अच्छा समाधान इस jquery प्लगइन का उपयोग करना है:

https://github.com/jmosbech/StickyTableHeaders

इस प्लगइन ने हमारे लिए बहुत अच्छा काम किया और हमने कई अन्य समाधानों की कोशिश की। हमने IE, क्रोम और फ़ायरफ़ॉक्स में इसका परीक्षण किया

— Janning
स्रोत
क्या आप किसी भी समाधान को जानते हैं जो हेडर में नॉकआउट डेटा बाउंड कंट्रोल की कार्यक्षमता को बनाए रखता है?
— सेसाबा तोथ
मेरे लिए काम नहीं किया: हेडर टेबल के बाहर हैं और ब्राउज़र (विंडो) के शीर्ष पर चिपके रहते हैं, यहां तक ​​कि विकल्प "स्क्रॉल करने योग्य" के साथ भी। मैंने देखा कि अतिरिक्त टिप्पणियों के बिना इसका उल्लेख किया गया था। हो सकता है कि उसे एक सीएसएस की जरूरत हो जो वह उपयोग करता है और यह काम करने के लिए उपलब्ध नहीं है।
— एक्सेल Gamboa
6

यहाँ पहले से ही कई अच्छे समाधान मौजूद हैं। लेकिन सरलतम सीएसएस में से केवल एक समाधान जो मैं इन स्थितियों में उपयोग करता हूं, वह इस प्रकार है:

table {
  /* Not required only for visualizing */
  border-collapse: collapse;
  width: 100%;
}

table thead tr th {
  /* Important */
  background-color: red;
  position: sticky;
  z-index: 100;
  top: 0;
}

td {
  /* Not required only for visualizing */
  padding: 1em;
}
<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>
स्निपेट का विस्तार करें

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

प्रत्येक नियम के बारे में विस्तार से बताएं। positionब्राउज़र को इंगित करने के लिए है कि सिर की वस्तु, उसकी पंक्ति और उसकी कोशिकाओं को सभी को शीर्ष पर रखने की आवश्यकता है। यह आवश्यक रूप से साथ होना चाहिए top, जो ब्राउज़र को निर्दिष्ट करता है कि सिर पृष्ठ या व्यूपोर्ट के शीर्ष पर चिपक जाएगा। इसके अतिरिक्त, आप z-indexयह सुनिश्चित करने के लिए जोड़ सकते हैं कि सिर की सामग्री हमेशा शीर्ष पर बनी रहे।

पृष्ठभूमि का रंग केवल इस बिंदु को स्पष्ट करने के लिए है। इस प्रभाव को पाने के लिए आपको किसी अतिरिक्त जावास्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है। यह 2016 के बाद सबसे प्रमुख ब्राउज़रों में समर्थित है।

— श्रीवत्स शंकर
स्रोत
1
imo सरल और साफ जवाब में, हमेशा एक समस्या को हल करने का एक सरल तरीका है, यह मामला है। हालांकि मैं एंगुलरज के साथ एनजी-रिपीट का उपयोग कर रहा हूं, यह एक आकर्षण की तरह काम कर रहा है।
— डेविड कास्त्रो
5

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

http://plugins.jquery.com/StickyTableHeaders/

यहां जानकारी का उपयोग करें: https://github.com/jmbesch/StickyTableHeaders

— लोक यान वोंग
स्रोत
3

खैर, सभी उपलब्ध समाधानों की समीक्षा के बाद मैंने प्लगइन लिखा जो पेज या कंटेनर के शीर्ष पर किसी भी पंक्ति (न केवल वें) को फ्रीज कर सकता है। यह बहुत सरल और बहुत तेज है। इसका इस्तेमाल करने के लिए स्वतंत्र महसूस करें। http://maslianok.github.io/stickyRows/

— विटालि मसलियानोक
स्रोत
3

आप इस दृष्टिकोण का उपयोग कर सकते हैं, शुद्ध HTML और CSS no JS की आवश्यकता है :) 

.table-fixed-header {
  display: flex;
  justify-content: space-between;
  margin-right: 18px
}

.table-fixed {
  display: flex;
  justify-content: space-between;
  height: 150px;
  overflow: scroll;
}

.column {
  flex-basis: 24%;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
}
.column .title {
  border-bottom: 2px grey solid;
  border-top: 2px grey solid;
  text-align: center;
  display: block;
  font-weight: bold;
}

.cell {
  padding: 5px;
  border-right: 1px solid;
  border-left: 1px solid;
}

.cell:nth-of-type(even) {
  background-color: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Fixed header Bin</title>
</head>
<body>
<div class="table-fixed-header">
    
    <div class="column">
      <span class="title">col 1</span>
    </div>
    <div class="column">
      <span class="title">col 2</span>
    </div>
    <div class="column">
      <span class="title">col 3</span>
    </div>
    <div class="column">
      <span class="title">col 4</span>
    </div>
    
  </div>
  
  <div class="table-fixed">
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
    </div>
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
    </div>
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
      <div class="cell">beta</div>
      <div class="cell">beta</div>
      <div class="cell">beta</div>
      
    </div>
    
    <div class="column">
      <div class="cell">alpha</div>
      <div class="cell">beta</div>
      <div class="cell">ceta</div>
    </div>
    
  </div>
</body>
</html>
स्निपेट का विस्तार करें

— xelilof
स्रोत
3

मुझे JQuery का उपयोग किए बिना और केवल CSS का उपयोग किए बिना एक सरल समाधान मिला ।

आपको निश्चित सामग्री को 'th' टैग के अंदर डालना होगा और CSS जोड़ना होगा

table th {
    position:sticky;
    top:0;
    z-index:1;
    border-top:0;
    background: #ededed;
}

स्थिति, जेड-इंडेक्स और शीर्ष गुण पर्याप्त हैं। लेकिन आप एक बेहतर दृश्य के लिए बाकी देने के लिए आवेदन कर सकते हैं।

— अभि दास
स्रोत
2

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

सीएसएस जोड़ने के लिए:

#maintable{width: 100%}

फिर यहाँ नई जावास्क्रिप्ट है:

    function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll > anchor_top && scroll < anchor_bottom) {
        clone_table = $("#clone");
        if(clone_table.length === 0) {          
            clone_table = $("#maintable").clone();
            clone_table.attr({id: "clone"})
            .css({
                position: "fixed",
                "pointer-events": "none",
                 top:0
            })
            .width($("#maintable").width());

            $("#table-container").append(clone_table);
            // dont hide the whole table or you lose border style & 
            // actively match the inline width to the #maintable width if the 
            // container holding the table (window, iframe, div) changes width          
            $("#clone").width($("#maintable").width());
            // only the clone thead remains visible
            $("#clone thead").css({
                visibility:"visible"
            });
            // clone tbody is hidden
            $("#clone tbody").css({
                visibility:"hidden"
            });
            // add support for a tfoot element
            // and hide its cloned version too
            var footEl = $("#clone tfoot");
            if(footEl.length){
                footEl.css({
                    visibility:"hidden"
                });
            }
        }
    } 
    else {
        $("#clone").remove();
    }
}
$(window).scroll(moveScroll);
— seeit360
स्रोत
यह एन्ट्रापी के समाधान से बेहतर काम करता है जहाँ तक सीमा रेखा प्रारूप हेडर में जाता है। हालाँकि, वर्तमान फ़ायरफ़ॉक्स (लेकिन क्रोम नहीं) में स्क्रॉलिंग शुरू होते ही यह टेबल के नीचे दिखाई देने वाली सेल-बॉर्डर कलाकृतियों का निर्माण करता है।
— alanng
2

यहाँ एक समाधान है जो स्वीकृत उत्तर पर बनाता है। यह इसके लिए सही है: कॉलम की चौड़ाई, मिलान तालिका शैली, और जब तालिका को कंटेनर div में स्क्रॉल किया जाता है।

प्रयोग

सुनिश्चित करें कि आपकी तालिका में एक <thead>टैग है क्योंकि केवल सामग्री को तय किया जाएगा।

$("#header-fixed").fixHeader();

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

//Custom JQuery Plugin
(function ($) {
    $.fn.fixHeader = function () {
        return this.each(function () {
            var $table = $(this);
            var $sp = $table.scrollParent();
            var tableOffset = $table.position().top;
            var $tableFixed = $("<table />")
                .prop('class', $table.prop('class'))
                .css({ position: "fixed", "table-layout": "fixed", display: "none", "margin-top": "0px" });
            $table.before($tableFixed);
            $tableFixed.append($table.find("thead").clone());

            $sp.bind("scroll", function () {
                var offset = $(this).scrollTop();

                if (offset > tableOffset && $tableFixed.is(":hidden")) {
                    $tableFixed.show();
                    var p = $table.position();
                    var offset = $sp.offset();

                    //Set the left and width to match the source table and the top to match the scroll parent
                    $tableFixed.css({ left: p.left + "px", top: (offset ? offset.top : 0) + "px", }).width($table.width());

                    //Set the width of each column to match the source table
                    $.each($table.find('th, td'), function (i, th) {
                        $($tableFixed.find('th, td')[i]).width($(th).width());
                    });

                }
                else if (offset <= tableOffset && !$tableFixed.is(":hidden")) {
                    $tableFixed.hide();
                }
            });
        });
    };
})(jQuery);
— बेन ग्रिपका
स्रोत
1
इसने मेरे लिए अच्छा काम किया। केवल एक चीज तालिकाओं के साथ एक मुद्दा है जिसे क्षैतिज रूप से स्क्रॉल करने की आवश्यकता है। मैंने यहाँ एक JSFiddle में अपडेट किया है jsfiddle.net/4mgneob1/1 मैं घटाता हूं $sp.scrollLeft()जो कि तयशुदा तालिका को स्क्रॉल करते समय बाईं ओर से स्क्रॉल की गई राशि को सही तरीके से पोस्ट किया जाता है। यह भी कहा कि जब क्षैतिज तालिका स्क्रॉल बाईं स्थिति को समायोजित करने के लिए दृश्यमान है स्क्रॉल जाँच। एक अन्य समस्या जिसका मैं हल नहीं कर सकता था, जब तालिका व्यूपोर्ट के ऊपर जाती है तो तय की गई तालिका को तब तक छिपाना चाहिए जब तक उपयोगकर्ता वापस स्क्रॉल नहीं करता।
— हेन्सेनरफेल
1
हो रही हैUncaught TypeError: $table.scrollParent is not a function
— कर्लिंग
1

यह आपको एक निश्चित हेडर लगाने में मदद करेगा जो डेटा के साथ क्षैतिज रूप से स्क्रॉल भी किया जा सकता है।

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Shubh</title>



<script type="text/javascript">
    var lastSeen = [ 0, 0 ];
    function checkScroll(div1, div2) {
        if (!div1 || !div2)
            return;
        var control = null;
        if (div1.scrollLeft != lastSeen[0])
            control = div1;
        else if (div2.scrollLeft != lastSeen[1])
            control = div2;
        if (control == null)
            return;
        else
            div1.scrollLeft = div2.scrollLeft = control.scrollLeft;
        lastSeen[0] = div1.scrollLeft;
        lastSeen[1] = div2.scrollLeft;
    }

    window
            .setInterval(
                    "checkScroll(document.getElementById('innertablediv'), document.getElementById('headertable'))",
                    1);
</script>

<style type="text/css">
#full {
    width: 400px;
    height: 300px;
}

#innertablediv {
    height: 200px;
    overflow: auto;
}

#headertable {
    overflow: hidden;
}
</style>
</head>
<body>

    <div id="full">




        <div id="headertable">
            <table border="1" bgcolor="grey" width="150px" id="headertable">
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>

                    <td>&nbsp;&nbsp;&nbsp;</td>
                </tr>

            </table>
        </div>




        <div id="innertablediv">

            <table border="1" id="innertableid">
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>
                <tr>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                    <td>shubh, ansh</td>
                </tr>

            </table>
        </div>
    </div>
</body>
</html>
— user2669926
स्रोत
यह आपको एक निश्चित हेडर लगाने में मदद करेगा जो डेटा के साथ क्षैतिज रूप से स्क्रॉल भी किया जा सकता है।
— user2669926
1 
function fix_table_header_position(){
 var width_list = [];
 $("th").each(function(){
    width_list.push($(this).width());
 });
 $("tr:first").css("position", "absolute");
 $("tr:first").css("z-index", "1000");
 $("th, td").each(function(index){
    $(this).width(width_list[index]);
 });

 $("tr:first").after("<tr height=" + $("tr:first").height() + "></tr>");}

यह मेरा समाधान है

— बस हम
स्रोत
1

पार्टी के लिए थोड़ा देर से, लेकिन यहां एक कार्यान्वयन है जो एक ही पृष्ठ पर कई तालिकाओं के साथ काम करता है और "जंक" नि: शुल्क (requestAnimationFrame का उपयोग करके)। इसके अलावा स्तंभों पर कोई चौड़ाई प्रदान करने की आवश्यकता नहीं है। क्षैतिज स्क्रॉलिंग भी काम करती है।

divयदि आवश्यक हो तो हेडर को परिभाषित किया गया है ताकि आप किसी भी मार्कअप को जोड़ सकें (जैसे बटन)। यह आवश्यक है कि सभी HTML है:

<div class="tbl-resp">
  <table id="tbl1" class="tbl-resp__tbl">
     <thead>
      <tr>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
      </tr>
    </thead> 
  </table>
</div>

https://jsfiddle.net/lloydleo/bk5pt5gs/

— सिंह
स्रोत
1

इस समाधान में फिक्स्ड हेडर को गतिशील रूप से बनाया जाता है, सामग्री और शैली को THEAD से क्लोन किया जाता है

आप सभी की जरूरत है दो लाइनों उदाहरण के लिए:

var $myfixedHeader = $("#Ttodo").FixedHeader(); //create fixed header $(window).scroll($myfixedHeader.moveScroll); //bind function to scroll event

मेरा jquery प्लगइन FixedHeader और getStyleObject प्रदान करता है, जिसे आप फ़ाइल .js में डाल सकते हैं

// JAVASCRIPT



/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 
Basic usage:
$.fn.copyCSS = function(source){
  var styles = $(source).getStyleObject();
  this.css(styles);
}
*/

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);



   
//Floating Header of long table  PiotrC
(function ( $ ) {
    var tableTop,tableBottom,ClnH;
    $.fn.FixedHeader = function(){
        tableTop=this.offset().top,
        tableBottom=this.outerHeight()+tableTop;
        //Add Fixed header
        this.after('<table id="fixH"></table>');
        //Clone Header
        ClnH=$("#fixH").html(this.find("thead").clone());
        //set style
        ClnH.css({'position':'fixed', 'top':'0', 'zIndex':'60', 'display':'none',
        'border-collapse': this.css('border-collapse'),
		'border-spacing': this.css('border-spacing'),
        'margin-left': this.css('margin-left'),
        'width': this.css('width')            
        });
        //rewrite style cell of header
        $.each(this.find("thead>tr>th"), function(ind,val){
            $(ClnH.find('tr>th')[ind]).css($(val).getStyleObject());
        });
    return ClnH;}
    
    $.fn.moveScroll=function(){
        var offset = $(window).scrollTop();
        if (offset > tableTop && offset<tableBottom){
            if(ClnH.is(":hidden"))ClnH.show();
            $("#fixH").css('margin-left',"-"+$(window).scrollLeft()+"px");
        }
        else if (offset < tableTop || offset>tableBottom){
            if(!ClnH.is(':hidden'))ClnH.hide();
        }
    };
})( jQuery );





var $myfixedHeader = $("#repTb").FixedHeader();
$(window).scroll($myfixedHeader.moveScroll);
/* CSS - important only NOT transparent background */

#repTB{border-collapse: separate;border-spacing: 0;}

#repTb thead,#fixH thead{background: #e0e0e0 linear-gradient(#d8d8d8 0%, #e0e0e0 25%, #e0e0e0 75%, #d8d8d8 100%) repeat scroll 0 0;border:1px solid #CCCCCC;}

#repTb td{border:1px solid black}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<h3>example</h3> 
<table id="repTb">
<thead>
<tr><th>Col1</th><th>Column2</th><th>Description</th></tr>
</thead>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
<tr><td>info</td><td>info</td><td>info</td></tr>
</table>
स्निपेट का विस्तार करें

— पियोत्र सी।
स्रोत
1

मुख्य तालिका के समान ही हेडर के साथ अतिरिक्त तालिका बनाएं। बस एक पंक्ति और उसमें सभी हेडर के साथ नई तालिका में थ्रेड डालें। निरपेक्ष और पृष्ठभूमि सफेद करो। मुख्य तालिका के लिए इसे एक div में रखें और कुछ ऊँचाई और अतिप्रवाह-वाई स्क्रॉल का उपयोग करें। इस तरह हमारी नई तालिका मुख्य तालिका के शीर्षलेख को पार कर लेगी और वहां बनी रहेगी। सब कुछ एक div में चारों ओर। नीचे यह करने के लिए किसी न किसी कोड है।

      <div class="col-sm-8">

        <table id="header-fixed" class="table table-bordered table-hover" style="width: 351px;position: absolute;background: white;">
        <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
      </table>


    <div style="height: 300px;overflow-y: scroll;">
          <table id="tableMain" class="table table-bordered table-hover" style="table-layout:fixed;overflow-wrap: break-word;cursor:pointer">
<thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>

                                    </table>
              </div>
        </div>
— Novice_JS
स्रोत
1 

div.wrapper {
    padding:20px;
}
table.scroll thead {
    width: 100%;
    background: #FC6822;
}
table.scroll thead tr:after {
    content: '';
    overflow-y: scroll;
    visibility: hidden;
}
table.scroll thead th {
    flex: 1 auto;
    display: block;
    color: #fff;
}
table.scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: auto;
    max-height: 200px;
}
table.scroll thead tr,
table.scroll tbody tr {
    display: flex;
}
table.scroll tbody tr td {
    flex: 1 auto;
    word-wrap: break;
}
table.scroll thead tr th,
table.scroll tbody tr td {
    width: 25%;
    padding: 5px;
    text-align-left;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
<div class="wrapper">
    <table border="0" cellpadding="0" cellspacing="0" class="scroll">
        <thead>
            <tr>
                <th>Name</th>
                <th>Vorname</th>
                <th>Beruf</th>
                <th>Alter</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Müller</td>
                <td>Marie</td>
                <td>Künstlerin</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Meier</td>
                <td>Stefan</td>
                <td>Chemiker</td>
                <td>52</td>
            </tr>
            <tr>
                <td>Schmidt</td>
                <td>Sabrine</td>
                <td>Studentin</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Mustermann</td>
                <td>Max</td>
                <td>Lehrer</td>
                <td>41</td>
            </tr>
            <tr>
                <td>Müller</td>
                <td>Marie</td>
                <td>Künstlerin</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Meier</td>
                <td>Stefan</td>
                <td>Chemiker</td>
                <td>52</td>
            </tr>
            <tr>
                <td>Schmidt</td>
                <td>Sabrine</td>
                <td>Studentin</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Mustermann</td>
                <td>Max</td>
                <td>Lehrer</td>
                <td>41</td>
            </tr>
            <tr>
                <td>Müller</td>
                <td>Marie</td>
                <td>Künstlerin</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Meier</td>
                <td>Stefan</td>
                <td>Chemiker</td>
                <td>52</td>
            </tr>
            <tr>
                <td>Schmidt</td>
                <td>Sabrine</td>
                <td>Studentin</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Mustermann</td>
                <td>Max</td>
                <td>Lehrer</td>
                <td>41</td>
            </tr>
        </tbody>
    </table>
</div>
स्निपेट का विस्तार करें

डेमो: सीएसएस फिक्स्ड टेबल हेडर डेमो

— revilodesign.de
स्रोत
0

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

.tableWrapper {
  overflow: auto;
  height: calc( 100% - 10rem );
}

और फिर आप onscroll हैंडलर को इसके साथ संलग्न कर सकते हैं, यहां आपके पास वह तरीका है जो प्रत्येक तालिका के साथ लिपटा हुआ पाता है <div class="tableWrapper"></div>:

  fixTables () {
    document.querySelectorAll('.tableWrapper').forEach((tableWrapper) => {
      tableWrapper.addEventListener('scroll', () => {
        var translate = 'translate(0,' + tableWrapper.scrollTop + 'px)'
        tableWrapper.querySelector('thead').style.transform = translate
      })
    })
  }

और यहाँ इस क्रिया में उदाहरण काम कर रहा है (मैंने इसे प्रीटियर बनाने के लिए बूटस्ट्रैप का इस्तेमाल किया है): फ़िडेल

जो लोग IE और एज का समर्थन करना चाहते हैं, उनके लिए यहां स्निपेट है:

  fixTables () {
    const tableWrappers = document.querySelectorAll('.tableWrapper')
    for (let i = 0, len = tableWrappers.length; i < len; i++) {
      tableWrappers[i].addEventListener('scroll', () => {
        const translate = 'translate(0,' + tableWrappers[i].scrollTop + 'px)'
        const headers = tableWrappers[i].querySelectorAll('thead th')
        for (let i = 0, len = headers.length; i < len; i++) {
          headers[i].style.transform = translate
        }
      })
    }
  }

IE और एज स्क्रॉल में थोड़ा कम अंतराल है ... लेकिन यह काम करता है

यहाँ उत्तर है जो मुझे यह पता लगाने में मदद करता है: उत्तर

— डैनियल बुड्ज़ोस्की
स्रोत
0

मैंने इनमें से अधिकांश समाधानों की कोशिश की है, और अंततः (IMO) सर्वश्रेष्ठ, आधुनिक, समाधान पाया है:

सीएसएस ग्रिड

CSS ग्रिड के साथ, आप एक 'ग्रिड' को परिभाषित कर सकते हैं, और आप अंत में एक निश्चित हेडर, और स्क्रॉल करने योग्य सामग्री के साथ एक टेबल के लिए एक अच्छा, जावास्क्रिप्ट-मुक्त, क्रॉस-ब्राउज़र समाधान बना सकते हैं । हेडर की ऊंचाई गतिशील भी हो सकती है।

CSS : ग्रिड के रूप में प्रदर्शित करें, और इसकी संख्या निर्धारित करें template-rows:

.grid {
    display: grid;
    grid-template-rows: 50px auto; // For fixed height header
    grid-template-rows: auto auto; // For dynamic height header
}

HTML : एक ग्रिड कंटेनर और परिभाषित संख्या बनाएँ rows:

<div class="grid">
    <div></div>
    <div></div>
</div>

यहाँ काम कर रहा है उदाहरण:

सीएसएस

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.table {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 50px auto;
}
.table-heading {
  background-color: #ddd;
}
.table-content {
  overflow-x: hidden;
  overflow-y: scroll;
}

एचटीएमएल

<html>
    <head>
    </head>
    <body>
        <div class="table">
            <div class="table-heading">
                HEADING
            </div>
            <div class="table-content">
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
                CONTENT - CONTENT - CONTENT <br/>
            </div>
        </div>
    </body>
</html>
— जेफरी रोसडेन्गल
स्रोत
0

मैंने इसे परिवर्तन का उपयोग करके आज़माया है : अनुवाद । जबकि यह फ़ायरफ़ॉक्स और क्रोम में अच्छा काम करता है, IE11 में बस कोई फ़ंक्शन नहीं है। कोई डबल स्क्रॉल बार नहीं। टेबल टफूट और कैप्शन का समर्थन करता है। शुद्ध जावास्क्रिप्ट, कोई jQuery नहीं।

http://jsfiddle.net/wbLqzrfb/42/

thead.style.transform="translate(0,"+(dY-top-1)+"px)";
— हेनरिक हफ़्टमैन
स्रोत
0

मुझे jquery के बिना एक समाधान मिला

एचटीएमएल

<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
    </tr>
  </tbody>
</table>

सीएसएस

.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: black;
  color:#fff;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}

आप इसे यहां काम करते हुए देख सकते हैं: https://jsfiddle.net/lexsoul/fqbsty3h

स्रोत: https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

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