শীর্ষস্থানীয় স্থির থাকার জন্য সারণী শিরোনাম যখন ব্যবহারকারী এটি jQuery এর সাথে দেখার বাইরে স্ক্রোল করে

145

আমি একটি এইচটিএমএল টেবিলটি ডিজাইনের চেষ্টা করছি যেখানে হেডার পৃষ্ঠার শীর্ষে থাকবে যখন যখন কেবলমাত্র ব্যবহারকারী এটিকে স্ক্রোল করে না দেখায়। উদাহরণস্বরূপ, সারণীটি পৃষ্ঠা থেকে 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/questions/1030043
— ব্র্যাড তোফেল
— স্বস্তিক রাজ ঘোষ
আমি অন্য প্রশ্নের উত্তর দিয়েছি, দয়া করে একবার দেখুন। stackoverflow.com/a/56764334/9388978
— Ersel Aktas

উত্তর:

131

আপনি scrollইভেন্ট হ্যান্ডলারে টিপ দিয়ে windowএবং tableপৃষ্ঠার শীর্ষে শিরোনামটি দেখানোর জন্য একটি স্থির অবস্থানের সাথে অন্যটি ব্যবহার করে এরকম কিছু করবেন ।

এইচটিএমএল:

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

সিএসএস:

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

javascript:

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/andrew whitaker / fj8wM/

— অ্যান্ড্রু হুইটেকার
সূত্র
60
আমি এটি ভাবছিলাম কিন্তু যদি লিখিত সামগ্রীর উপর ভিত্তি করে শিরোনাম কলামগুলির প্রস্থ পরিবর্তন হয়? কলামের প্রস্থগুলি স্থির না করা হলে আপনার শিরোনামের সারিটি সামগ্রীর সারিগুলির সাথে সীমাবদ্ধ না রাখতে পারে। শুধু একটি ভাবনা.
— ইজমির রামিরেজ
16
কলামের শিরোনামের নামগুলি কলামের ডাটা মানগুলির চেয়ে কম হলে এই উদাহরণটি কাজ করে না। তথ্যের পরিবর্তে infoooooooo এর মতো মান পেতে সেই ফিডলটি পরিবর্তন করে দেখুন। আমি টেবিলের ক্লোনিং করার সময় সেট করা এমন একরকম হার্ডকোডযুক্ত প্রস্থের কথা ভাবছি।
— হোয়াইটুক 6
6
এর বড় সীমাবদ্ধতা রয়েছে যার মধ্যে কমপক্ষে অন্যটি কোনও পাত্রে টেবিলটি ব্যবহার করার চেষ্টা করার সময় window। mkoryak.github.io/floatThead এর আরও সাধারণ-প্রয়োগযোগ্য সমাধান রয়েছে।
— ইয়াক
13
এটি যে কাউকে গতিশীল th ষ্ঠ প্রস্থের প্রয়োজনে সহায়তা করতে পারে, এটিই আমি যা করছিলাম তা হ'ল, এটি @ অ্যান্ড্রুউইটেকারের একটি কাঁটাচালনা: jsfiddle.net/noahkoch/wLcjh/1
— নোহ কোচ
1
আপনার সলিউশন ব্যবহার করে @ নোহকোচ ফিক্সড শিরোনামটি মূল কক্ষগুলির প্যাডিং থাকা অবস্থায় এখনও মূল মাথার মতো চওড়া হতে পারে না। সদৃশ কক্ষে প্যাডিং যুক্ত করতে আমি আপনার সমাধানটি উন্নত করেছি। জেএসফিডেলের কাঁটাচলা: 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
ওহ, আমি পেয়েছি এই পদ্ধতিটি দুর্দান্ত কারণ এটি তরল কলামগুলির সাথে কাজ করে, আমি কিছুটা googled করেছি এবং সেই কার্যকারিতা সহ অন্য একটি খুঁজে পাইনি। যাইহোক, আমি যদি এটি কোনওভাবে সম্পন্ন করে নিই তবে আমি এখানে এটি উল্লেখ করব
— এম 2_
1
@ লুফ্লুহ, হ্যাঁ, সমস্যাটি পয়েন্টার-ইভেন্টগুলির কারণে হয়েছিল: ক্লোন টেবিলের মধ্যে কেউ নেই। ক্লিকগুলি ক্লোন এবং মূল সারণিতে যেতে যাতে এটি ব্যবহার করা হয়। এটি ক্লোন করা টেবিলের শিরোনামে ফিরে যাওয়া যাতে শিরোনামটি (এবং কেবলমাত্র শিরোনামটি) ক্লিকযোগ্য সমস্যাটি সমাধান করে। আমি এই :) প্রতিফলিত আমার পোস্টে আপডেট করেছি
— এনট্রপি
4
<thead> <th>
— জ্যাম ভিলে
1
@JamVille কারণ ক্লোন টেবিল রয়েছে visibility: hidden। আপনি কেবল আড়াল করতে পারেন #clone tbodyএবং তার পরে আপনি সীমানা সেট করতে পারেন ... ফিডিং
— লাজডেক মারেক
46

খাঁটি সিএসএস (আইই 11 সমর্থন ব্যতীত):

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।
— কারম্যানিজম 24'17
@ কারম্যানিজম -webkit-stickyসাফারি (ডেস্কটপ এবং আইওএস) এর জন্য, ক্রোমের জন্য নয়। position: stickyসংস্করণ 56. থেকে Chrome কাজ করে আপনি উভয় নিয়ম সেট করা উচিত: -webkit-stickyএবং মাত্র stickyআমার কোড উদাহরণ হিসাবে একই আদেশ ঠিক। সাফারি পেয়ে যায় webkit-stickyএবং অন্যান্য সমস্ত ব্রাউজার এটিকে ওভাররাইট করে sticky।
— ইহোর জেনিখ
2
আমি এটি কাজ করতে অক্ষম ছিল। একটি দ্রুত গুগল থেকে দেখে মনে হচ্ছে এটি position: stickyটেবিল উপাদানগুলির সাথে কাজ করবে না।
— rjh
3
আবেদনের জন্য আমার পক্ষে কাজ করেছেন: টেবিল থেড থ্রো {...}
— মুরপুর
1
এটা আপনাকে আবেদন করতে হবে তম কারণ এটি thead কিংবা TR কাজ করবে না
— helado
26

আমি একটি প্লাগইন লিখেছি যা এটি করে। Ive এখন প্রায় এক বছর ধরে এটি নিয়ে কাজ করে যাচ্ছি এবং আমি মনে করি এটি কোণার সমস্ত ক্ষেত্রে খুব ভালভাবে পরিচালনা করে:

  • ওভারফ্লো সহ একটি ধারক মধ্যে স্ক্রোলিং
  • একটি উইন্ডো মধ্যে স্ক্রোলিং
  • আপনি যখন উইন্ডোটির আকার পরিবর্তন করবেন তখন কী হবে তার যত্ন নেওয়া
  • আপনার ইভেন্টগুলি শিরোলেখের সাথে আবদ্ধ
  • সর্বাধিক গুরুত্বপূর্ণ এটি আপনার টেবিলের সিএসএসকে কাজ করতে বাধ্য করতে বাধ্য করে না

এখানে কিছু ডেমো / ডক্স রয়েছে:
http://mkoryak.github.io/floatThead/

— mkoryak
সূত্র
দুর্দান্ত প্রচেষ্টা, তবে আইই 10 এর সাথে কাজ করে না এবং ফায়ারফক্স 23 / উবুন্টুতে উইন্ডোজকে পুনরায় আকার দেওয়ার বিষয়ে কিছু বিচক্ষণতা রয়েছে।
— Janning
2
এফওয়াইআই: আমি সর্বশেষতম সংস্করণে আইই 9 এবং 10 এর সাথে সমস্যাগুলি স্থির করেছি।
— mkoryak
2
আপনি কি এমন একটি সংস্করণ তৈরি করতে পারেন যা jQuery প্রয়োজন হয় না?
— কার্টিস ডাব্লু
2
সম্ভবত সে jquery ব্যবহার করে না ... এবং না - আমি এমন কোনও সংস্করণ তৈরি করব না যা jquery ব্যবহার করে না।
— mkoryak
1
আমি একটি সাধারণ জিকিউরি টেবিলসোর্টার প্লাগইন ব্যবহার করি এবং আপনার প্রায়শই জিজ্ঞাসিত প্রশ্নাগুলি অনুসারে আপনার প্লাগইনটি # সোর্টেবল টিডি {..} এর মতো বেশিরভাগ সিএসএস নিয়ম পছন্দ করে না। আমি কিছুটা টুইট করার চেষ্টা করেছি কিন্তু আমি এটি কাজে লাগাতে পারি না।
— মার্শ
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
সূত্র
আমি এই স্ক্রিপ্টটি স্থির করে রেখেছি যাতে এটি <<> উপাদানগুলিতে সীমানা এবং প্যাডিংগুলি পরিচালনা করতে পারে (অন্যথায় এটি স্থির শিরোনাম <বিস্তৃত প্রস্থগুলি খুব প্রশস্ত করে দেয়)। কেবলমাত্র পরিবর্তন outerWidthকরতে widthresizeFixed () ফাংশন সংজ্ঞা।
— অ্যালাং
z-indexআপনার .fixedক্লাসে কিছু ইতিবাচক সংখ্যার একটি সিএসএস সম্পত্তি যুক্ত করার দরকারও থাকতে পারে যাতে টেবিলের পোস্ট-পেজ লোড রেন্ডার করা অবজেক্টগুলি যখন আপনি স্ক্রোল করবেন তখন স্থির শিরোনামের উপরে ভেসে উঠবে না।
— অ্যালাং
সহজ এবং দরকারী।
— রিচিডি
কীভাবে ডায়নামিকভাবে শীর্ষ অবস্থানটি পরিচালনা করবেন। যাক, আমাকে আমার প্রধান পৃষ্ঠার ফিক্সড শিরোনাম সামগ্রীটির নীচে পর্যন্ত স্ক্রোল করতে হবে। .ফিক্সড {শীর্ষ: 0;} ।
— বিজয়ভিষ্ণু
2
@ কেরি জনসন নোটের জন্য ধন্যবাদ। আমি কিছু পরিবর্তন করেছি যাতে এটি অনুভূমিক স্ক্রোলিং এবং গতিশীল কলাম প্রস্থকে সমর্থন করে।
— জোসেফ্টিং
7

এই jquery প্লাগইনটি ব্যবহার করা ভাল সমাধান:

https://github.com/jmosbech/StickyTableHeaders

এই প্লাগইনটি আমাদের জন্য দুর্দান্ত কাজ করেছে এবং আমরা অন্যান্য অনেকগুলি সমাধান চেষ্টা করেছি। আমরা এটি IE, ক্রোম এবং ফায়ারফক্সে পরীক্ষা করেছি

— Janning
সূত্র
আপনি কি এমন কোনও সমাধান জানেন যা যা শিরোনামে নকআউট ডেটা বাউন্ড নিয়ন্ত্রণের কার্যকারিতাও সংরক্ষণ করে?
— সিসাবা তোথ
আমার পক্ষে কাজ করেনি: শিরোনামগুলি টেবিলের বাইরে থাকে এবং ব্রাউজারের শীর্ষে আটকে থাকে (উইন্ডো), এমনকি "স্ক্রোলএবলিয়া" বিকল্পটি রয়েছে। আমি দেখেছি যে অতিরিক্ত মন্তব্য ছাড়াই এটির আগে উল্লেখ করা হয়েছিল। সম্ভবত এটির জন্য একটি সিএসএস প্রয়োজন যা এটি ব্যবহার করে এবং এটি কাজ করার জন্য উপলভ্য নয়।
— গাম্বোয়া
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
ইমো সহজ এবং পরিষ্কার উত্তর, একটি সমস্যা সমাধানের জন্য সর্বদা একটি সহজ উপায় আছে, এই ক্ষেত্রে এটি। যদিও আমি এনজুলিপিটি অ্যাংুলারজগুলির সাথে ব্যবহার করছি এটি একটি কবজির মতো কাজ করছে।
— ডেভিড কাস্ত্রো
5

আমি স্টিকি টেবিল শিরোনাম নামে একটি সাধারণ জিকুয়ের লাইব্রেরি পেয়েছি। দুটি লাইনের কোড এবং এটি যা চেয়েছিল ঠিক তাই করেছিল। উপরের সমাধানগুলি কলামের প্রস্থগুলি পরিচালনা করে না, সুতরাং আপনার যদি এমন টেবিল সেল থাকে যেগুলি অনেক বেশি জায়গা নেয় তবে ধ্রুবক শিরোনামের ফলস্বরূপ আকারটি আপনার টেবিলের প্রস্থের সাথে মেলে না।

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

ব্যবহারের তথ্য এখানে: https://github.com/jmosbech/StickyTableHeilers

— লোক ইয়ান ওয়াং
সূত্র
3

ভাল, সমস্ত উপলভ্য সমাধান পর্যালোচনা করার পরে আমি প্লাগইন লিখেছিলাম যা পৃষ্ঠা বা ধারকটির শীর্ষে যে কোনও সারি (কেবলমাত্র নয়) হিম করতে পারে can এটি খুব সাধারণ এবং খুব দ্রুত। এটি বিনামূল্যে নির্দ্বিধায়। http://maslianok.github.io/stickyRows/

— ভিটালি ম্যাসলিয়ানোক
সূত্র
3

আপনি এই পদ্ধতির ব্যবহার করতে পারেন, খাঁটি এইচটিএমএল এবং সিএসএসের কোনও জেএসের দরকার নেই :) 

.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 ব্যবহার না করে একটি সহজ সমাধান পেয়েছি ।

আপনাকে স্থির সামগ্রীগুলি 'তম' ট্যাগের ভিতরে রাখতে হবে এবং সিএসএস যুক্ত করতে হবে

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
সূত্র
এটি এন্ট্রপির সমাধানের চেয়ে আরও ভাল কাজ করতে পারে যতক্ষণ সীমানা ফর্ম্যাটিং শিরোনামে যায়। তবে, বর্তমান ফায়ারফক্সে (তবে ক্রোম নয়) এটি একবার টেবিলের নীচে দৃশ্যমান সেল-বর্ডার শৈল্পিকাগুলি তৈরি করে একবার স্ক্রোলিং শুরু হয়।
— অ্যালাং
2

এখানে একটি সমাধান যা গৃহীত উত্তরের উপর ভিত্তি করে। এটি এর জন্য সংশোধন করে: কলাম প্রস্থ, মেলা টেবিল শৈলী, এবং যখন টেবিলটি একটি ধারক ডিভাইসে স্ক্রোল করা হয়।

ব্যবহার

আপনার টেবিলটিতে কোনও <thead>ট্যাগ রয়েছে তা নিশ্চিত করুন কারণ কেবলমাত্র থ্যাডের সামগ্রী ঠিক করা হবে।

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

JavaSript

//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.net/4mgneob1/1 আমি বিয়োগ করি $sp.scrollLeft()যা নির্ধারিত টেবিলটি নীচে স্ক্রোল করার সময় সঠিকভাবে বাম থেকে স্ক্রল করা পরিমাণ পায় so বাম অবস্থানটি সামঞ্জস্য করতে স্থির টেবিল দৃশ্যমান হলে অনুভূমিকভাবে স্ক্রোল করার সময় চেক যুক্ত করা হয়েছে। আর একটি সমস্যা যা আমি সমাধান করতে পারিনি তা হ'ল যখন টেবিলটি ভিউপোর্টের উপরে চলে যায় যখন ব্যবহারকারী ব্যাক আপ না করা পর্যন্ত স্থির টেবিলটি লুকিয়ে রাখা উচিত।
— হেনেসনারফেল
1
পথUncaught TypeError: $table.scrollParent is not a function
— karlingen
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
সূত্র
এটি আপনাকে একটি স্থির শিরোনাম রাখতে সহায়তা করবে যা ডেটা দিয়ে অনুভূমিকভাবেও স্ক্রোল করা যায়।
— ব্যবহারকারী 2669926
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

পার্টিতে কিছুটা দেরি হলেও এখানে এমন একটি বাস্তবায়ন যা একই পৃষ্ঠায় একাধিক টেবিল এবং "জাঙ্ক" ফ্রি (অনুরোধঅ্যানিমেশনফ্রেম ব্যবহার করে) এর সাথে কাজ করে। এছাড়াও কলামগুলিতে কোনও প্রস্থ দেওয়ার দরকার নেই। অনুভূমিক স্ক্রোলিং পাশাপাশি কাজ করে।

শিরোনামগুলি এমনভাবে সংজ্ঞায়িত করা হয় divযাতে প্রয়োজন হলে আপনি সেখানে কোনও মার্কআপ যোগ করতে (যেমন বোতামগুলি) মুক্ত করতে পারেন। এটি প্রয়োজনীয় সমস্ত এইচটিএমএল:

<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

এই সমাধানটিতে স্থির শিরোনামটি গতিশীলভাবে তৈরি করা হয়, সামগ্রী এবং স্টাইলটি থ্যাড থেকে ক্লোন করা হয়

আপনার কেবল দুটি লাইনের প্রয়োজন উদাহরণস্বরূপ:

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

আমার jquery প্লাগইন ফিক্সডহাইডার এবং 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

প্রধান টেবিলের মতো একই শিরোনামযুক্ত অতিরিক্ত টেবিল তৈরি করুন। এক সারি এবং এর মধ্যে সমস্ত শিরোনাম সহ নতুন থেবিলটিতে থ্যাডটি রাখুন। নিরঙ্কুশ এবং পটভূমি সাদা করুন। প্রধান টেবিলের জন্য এটি একটি ডিভের মধ্যে রাখুন এবং কিছু উচ্চতা এবং ওভারফ্লো-ওয়াই স্ক্রোল ব্যবহার করুন। এইভাবে আমাদের নতুন টেবিলটি প্রধান টেবিলের শিরোলেখ অতিক্রম করবে এবং সেখানে থাকবে stay একটি ডিভ মধ্যে সবকিছু ঘিরে। নীচে এটি করার জন্য মোটামুটি কোড দেওয়া আছে।

      <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

স্টাইল সম্পত্তি রূপান্তর ব্যবহার করে এটি অর্জন করা যেতে পারে। আপনাকে যা করতে হবে তা হ'ল স্থির উচ্চতা এবং অটো প্রবাহ অটোতে সেট করে আপনার টেবিলটিকে কিছু ডিভের মধ্যে মোড়ানো example উদাহরণস্বরূপ:

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

এবং তারপরে আপনি এতে অনস্ক্রোল হ্যান্ডলার সংযুক্ত করতে পারেন, এখানে আপনার কাছে এমন পদ্ধতি রয়েছে যা প্রতিটি টেবিলটি মোড়ানো অবস্থায় খুঁজে পায় <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
      })
    })
  }

এবং এখানে কর্মের উদাহরণটি এখানে কাজ করা হয়েছে (আমি এটি সুন্দর করার জন্য বুটস্ট্র্যাপ ব্যবহার করেছি): ফিজল

যারা আইই এবং এজকে সমর্থন করতে চান তাদের জন্য এখানে স্নিপেট রয়েছে:

  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
        }
      })
    }
  }

আইই এবং এজতে স্ক্রোলটি কিছুটা পিছলে ... তবে এটি কার্যকর

এই উত্তরটি যা আমাকে এটি খুঁজে পেতে সহায়তা করে: উত্তর

— ড্যানিয়েল বুজ্জিস্কি
সূত্র
0

আমি এই সমাধানগুলির বেশিরভাগ চেষ্টা করে দেখেছি এবং শেষ পর্যন্ত (আইএমও) সেরা, আধুনিক, সমাধান খুঁজে পেয়েছি:

সিএসএস গ্রিড

সিএসএস গ্রিডের সাহায্যে আপনি একটি 'গ্রিড' সংজ্ঞায়িত করতে পারেন এবং শেষ পর্যন্ত আপনি একটি স্থির শিরোনামযুক্ত টেবিলের জন্য একটি দুর্দান্ত, জাভাস্ক্রিপ্ট-মুক্ত, ক্রস ব্রাউজার সমাধান এবং স্ক্রোলযোগ্য সামগ্রী তৈরি করতে পারেন। শিরোনামের উচ্চতা এমনকি গতিশীল হতে পারে।

সিএসএস : গ্রিড হিসাবে প্রদর্শন করুন এবং এর সংখ্যা নির্ধারণ করুন template-rows:

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

এইচটিএমএল : একটি গ্রিড ধারক এবং সংজ্ঞায়িত সংখ্যা তৈরি করুন 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

আমি ট্রান্সফর্মেশন: ট্রান্সলেট ব্যবহার করে চেষ্টা করেছি । এটি ফায়ারফক্স এবং ক্রোমে ভাল কাজ করার সময়, আইই 11 তে কেবল কোনও কার্যকারিতা নেই। কোনও ডাবল স্ক্রোল বার নেই। টেবিল টিফুট এবং ক্যাপশন সমর্থন করে। খাঁটি জাভাস্ক্রিপ্ট, কোনও 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-scrol-able-table-body-tbody-d23182ae0fbc

— Lexsoul
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.