বিশুদ্ধ CSS এর উপর স্থির শিরোনাম এবং স্থির কলাম সহ সারণী

104

আমাকে একটি নির্দিষ্ট শিরোনাম এবং একটি নির্দিষ্ট প্রথম কলাম সহ একটি এইচটিএমএল টেবিল (বা অনুরূপ কিছু দেখায়) তৈরি করতে হবে।

আমি এখনও অবধি প্রতিটি সমাধান জাভাস্ক্রিপ্ট ব্যবহার করেছি বা jQueryস্ক্রোলটপ / স্ক্রোললিফ্ট সেট করতে, তবে এটি মোবাইল ব্রাউজারগুলিতে সহজে কাজ করে না, তাই আমি একটি খাঁটি সিএসএস সমাধান খুঁজছি CSS

আমি এখানে একটি স্থির কলামের জন্য একটি সমাধান পেয়েছি: jsfiddle.net/C8Dtf/20/ তবে আমি জানি না যে আমি কীভাবে এটি বাড়িয়ে দিতে পারি শিরোনামকে স্থির করতে।

আমি এটি ওয়েবকিট ব্রাউজারগুলিতে কাজ করতে বা কিছু css3বৈশিষ্ট্য ব্যবহার করতে চাই, তবে আমি আবার বলছি, আমি Javascriptস্ক্রোলিংয়ের জন্য ব্যবহার করতে চাই না ।

সম্পাদনা: আমি যে আচরণটি অর্জন করতে চাই তার উদাহরণ এটি: https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/Fixed Collines/ css_size.html

html  css  html-table  markup  fixed-header-tables 
— পানফিল
সূত্র
এই মুহুর্তে <html> <table> স্থির শিরোনাম <thead> সহ সিএসএস-স্তর -3 দিয়ে কোথায় করতে হবে তা আমি দেখতে পাচ্ছি না। তোমার কাছে আর কিছু আছে ? এ পর্যন্ত কি কি চেষ্টা করেছ ?
— মিলচে প্যাটার্ন
আমি positionসারি এবং কোষগুলিতে জটিল আচরণ প্রয়োগ করার চেষ্টা করেছি , তবে এটি কোথায় পরিস্রাবণযোগ্য বা না তা আমি যথেষ্ট বুঝতে পারি না।
— পানফিল
4
এই উত্তরটি আপনাকে স্ট্যাকওভারফ্লো.com
— গ্যারি

উত্তর:

153

একটি স্থির শিরোনাম সারি এবং প্রথম কলাম সহ একটি আসল খাঁটি CSS সমাধান solution

খাঁটি সিএসএস ব্যবহার করে আমাকে একটি স্থির শিরোনাম এবং একটি স্থির প্রথম কলাম উভয় দিয়ে একটি টেবিল তৈরি করতে হয়েছিল এবং এখানে উত্তরগুলির কোনওটিরই আমি যা চেয়েছিলাম তা যথেষ্ট নয়।

position: stickyসম্পত্তি শীর্ষে উভয় স্টিকিং সমর্থন (যেমন আমি দেখেছি এটা সবচেয়ে ব্যবহৃত) এবং Chrome, ফায়ারফক্স, এবং এজ আধুনিক সংস্করণে পাশ থেকে। এটি এমন একটির সাথে মিলিত হতে পারে divযা overflow: scrollআপনাকে স্থির শিরোনামযুক্ত একটি টেবিল দেওয়ার সম্পত্তি রাখে যা আপনার পৃষ্ঠায় যে কোনও জায়গায় রাখা যেতে পারে:

আপনার টেবিলটি একটি পাত্রে রাখুন:

<div class="container">
  <table></table>
</div>

overflow: scrollস্ক্রোলিং সক্ষম করতে আপনার ধারকটিতে ব্যবহার করুন:

div.container {
  overflow: scroll;
}

ডাগমার মন্তব্যে যেমন উল্লেখ করেছেন, ধারকটির জন্যও a max-widthএবং a প্রয়োজন max-height।

ব্যবহার করুন position: stickyসারণীর কক্ষের আছে লাঠি এবং প্রান্ত থেকে top, rightঅথবা leftবিদ্ধ যা প্রান্ত পছন্দ করে নিন:

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}

হিসাবে MarredCheese মন্তব্য উল্লেখ করা হয়েছে, যদি আপনার প্রথম কলামটি রয়েছে <td>পরিবর্তে উপাদান <th>উপাদান, আপনি ব্যবহার করতে পারেন tbody td:first-childআপনার CSS এ পরিবর্তেtbody th

প্রথম কলামে শিরোনামটি বামদিকে আটকে রাখতে ব্যবহার করুন:

thead th:first-child {
  left: 0;
  z-index: 1;
}

কোড স্নিপেট দেখান

https://jsfiddle.net/qwubvg9m/1/

— ম্যাথু শ্ল্যাচটার
সূত্র
22
এটি সেরা উত্তর মত মনে হচ্ছে।
— ব্যবহারকারী 1190132
9
@ পাইরেটএপ যদি আপনি widthনিজের প্রথম কলামটি জানেন তবে position: stickyআপনি আপনার দ্বিতীয় কলামের কক্ষগুলিতে leftআপনার প্রথম কলামের সমান মান সহ ব্যবহার করতে পারেন width: jsfiddle.net/wvypo83c/794
— ম্যাথু
4
এই উত্তরটি প্রমাণ করে যে নীচে সমস্ত দিকটি পড়া ভাল!
— মিরলি
4
এটি ধারকটিতে সর্বাধিক প্রস্থ এবং সর্বোচ্চ-উচ্চতা সেট ছাড়া কাজ করে না।
— ডগমার
10
এই উত্তরটি এখানে SO এবং ওয়েব জুড়ে আশ্চর্যজনকভাবে-আত্মবিশ্বাসী, চকচকে-আপভোস্টেড পোস্টারগুলির অবসন্ন সমুদ্র, অবিরাম জটিল, সময় অপচয় করার উত্তরগুলি অবিরাম সমুদ্রের মধ্য দিয়ে আমাদের ঘরে পরিচালিত একটি বাতিঘর। মনে রাখবেন যে আপনার প্রথম কলামে <td>উপাদানগুলির পরিবর্তে উপাদান রয়েছে <th>, আপনি tbody td:first-childপরিবর্তে আপনার সিএসএসে ব্যবহার করতে পারেন tbody th।
— মারেডচিজ
34

আজকাল, কেবলমাত্র সম্পত্তি দিয়ে সিএসএস ব্যবহার করা সম্ভব ।position: sticky

এখানে একটি স্নিপেট যায়:

(জেএসফিডাল: https://jsfiddle.net/hbqzdzdt/5/ )

.grid-container {
  display: grid; /* This is a (hacky) way to make the .grid element size to fit its content */
  overflow: auto;
  height: 300px;
  width: 600px;
}
.grid {
  display: flex;
  flex-wrap: nowrap;
}
.grid-col {
  width: 150px;
  min-width: 150px;
}

.grid-item--header {
  height: 100px;
  min-height: 100px;
  position: sticky;
  position: -webkit-sticky;
  background: white;
  top: 0;
}

.grid-col--fixed-left {
  position: sticky;
  left: 0;
  z-index: 9998;
  background: white;
}
.grid-col--fixed-right {
  position: sticky;
  right: 0;
  z-index: 9998;
  background: white;
}

.grid-item {
  height: 50px;
  border: 1px solid gray;
}
<div class="grid-container">
  <div class="grid">
    <div class="grid-col grid-col--fixed-left">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
      <div class="grid-item">
        <p>Hello</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
      <div class="grid-item">
        <p>P</p>
      </div>
    </div>

    <div class="grid-col grid-col--fixed-right">
      <div class="grid-item grid-item--header">
        <p>HEAD</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
      <div class="grid-item">
        <p>9</p>
      </div>
    </div>

  </div>
</div>
স্নিপেট প্রসারিত করুন

সামঞ্জস্যতা সম্পর্কে। এটি সমস্ত বড় ব্রাউজারগুলিতে কাজ করে তবে আইই তে নয়। এর জন্য একটি পলিফিল রয়েছে position: stickyতবে আমি কখনও চেষ্টা করে দেখিনি।

— আলভারো
সূত্র
4
এই দুর্দান্ত, এটা ভালবাসা!
— ক্যাপ্টেন লু
4
<table> -tags এবং <ডিভ> না দিয়ে এই অর্জনের যে কোনও উপায়
— Andreas
4
আমি মনে করি আপনি যদি কোনও অ্যাপ্লিকেশন বিকাশ করছেন এবং এই টেবিলটি মুদ্রণের জন্য রেকর্ডগুলির মাধ্যমে লুপ করা দরকার তবে টেবিলের প্রতিটি কলামের জন্য আপনাকে পুরো রেকর্ডের অ্যারেটি লুপ করতে হবে think এই এইচটিএমএল কলাম অনুসারে কলাম কাজ করে।
— ইগস্প্রেতো
@ আইগাস্পেরেটো আপনি সারি / কলামগুলি অন্য উপায়ে অন্যভাবে সাজিয়ে নিতে পারেন এবং সমাধানটি এখনও কার্যকর হবে। যদি আমার কিছুটা সময় পরে থাকে তবে আমি গ্রিড অর্ডার করা সারি -> কলাম দিয়ে একটি স্নিপেট তৈরি করতে পারি।
— আলভারো
4
আমি <টেবিল> এবং সম্পর্কিত ট্যাগ ব্যবহার না করে ট্যাবুলার ডেটা প্রদর্শন করার বিরুদ্ধে পরামর্শ দেব। অ্যাক্সেসিবিলিটি সহ এইভাবে এইচটিএমএলটির অভিযুক্ত ব্যবহারটি ভাঙ্গার বেশ কয়েকটি সমস্যা রয়েছে। আরও দেখুন: w3.org/WAI/tutorials/tables
— বেন মরিস
15

এটি কোনও সহজ কীর্তি নয়।

নিম্নলিখিত লিঙ্কটি একটি কার্যকারী ডেমোতে রয়েছে:

ল্যানোএক্সএক্স এর মন্তব্য অনুসারে লিংক আপডেট হয়েছে

http://jsfiddle.net/C8Dtf/366/

এগুলি যোগ করতে কেবল মনে রাখবেন:

<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>

আমি এটি অর্জনের অন্য কোনও উপায় দেখতে পাচ্ছি না। বিশেষত কেবল সিএসএস ব্যবহার করে নয়।

এটি অনেকটা পার হতে হবে। আশাকরি এটা সাহায্য করবে :)

— ফিলিপ-জুয়ান
সূত্র
ফিল্টার ব্যবহারের স্যুইচ করতে: "bFilter": false
— ল্যানক্সিক্স
6
এটা তোলে হয় শুধুমাত্র CSS এর সঙ্গে এই অর্জন করা সম্ভব। সহজ নয় তবে সম্ভব।
— জিমি টি।
প্রায় 10 টি সমাধান থেকে এটিই কাজ করেছিল। BTW, "57 57 টি এন্ট্রির মধ্যে 1 দেখানো" অ্যাড মুছে ফেলার জন্য "bInfo" : falseমধ্যে .dataTable()কল
— hansaplast
ডেটাবেবলস == "দুর্দান্ত"
— বিলিএনও
এই সমাধানটি নিম্নমানের কারণ এটি খারাপ। এটি theadনিজস্ব টেবিলে রয়েছে যা tdউপাদানগুলির পরিবর্তনের জন্য আবদ্ধ নয় , তাই কোনও ঘরের পাঠ্য দীর্ঘ হলে thপ্রস্থটি সেই অনুযায়ী সামঞ্জস্য করবে না।
— vsync
14

এই সমস্ত প্রস্তাবনা দুর্দান্ত এবং সমস্ত, তবে তারা হয় কেবলমাত্র শিরোনাম বা একটি কলামই ঠিক করছে, উভয়ই নয়, বা তারা জাভাস্ক্রিপ্ট ব্যবহার করছে। কারণ - এটি খাঁটি সিএসএসে করা যেতে পারে বলে বিশ্বাস করে না। কারন:

যদি এটি করা সম্ভব হয় তবে আপনাকে একে অন্যের ভিতরে বিভিন্ন স্ক্রোলযোগ্য ডিভগুলি বাসা বাঁধতে হবে, যার প্রতিটি আলাদা দিকের স্ক্রোলযুক্ত। তারপরে আপনাকে আপনার টেবিলটি তিন ভাগে ভাগ করতে হবে - ফিক্সড শিরোনাম, নির্দিষ্ট কলাম এবং বাকী ডেটা।

ভাল। তবে এখন সমস্যা - আপনি যখন স্ক্রোল করবেন তখন আপনি তাদের মধ্যে একটিকে রেখে দিতে পারেন, তবে অন্যটি প্রথমে স্ক্রোলিংয়ের ভিতরে বাসা বেঁধে থাকে এবং তাই এটি নিজেই দৃষ্টির বাইরে স্ক্রোল হওয়ার বিষয়, সুতরাং স্থিরভাবে স্থির করা যায় না পর্দাটি. 'আহ-হা' আপনি বলেছেন 'তবে আমি তা করতে কোনওভাবে নিখুঁত বা স্থির অবস্থানটি ব্যবহার করতে পারি' - না আপনি পারবেন না। যত তাড়াতাড়ি আপনি এটি করেন আপনি সেই ধারকটি স্ক্রোল করার ক্ষমতা হারাবেন। এটি একটি মুরগির এবং ডিমের পরিস্থিতি - আপনার উভয়ই থাকতে পারে না, তারা একে অপরকে বাতিল করে দেয়।

আমি বিশ্বাস করি এর একমাত্র সমাধান জাভাস্ক্রিপ্টের মাধ্যমে। আপনাকে তিনটি উপাদান পুরোপুরি আলাদা করতে হবে এবং জাভাস্ক্রিপ্টের মাধ্যমে তাদের অবস্থানগুলি সিঙ্কে রাখা উচিত। এই পৃষ্ঠায় অন্যান্য পোস্টে ভাল উদাহরণ আছে। এটি এক নজর দেওয়ার মতো:

http://tympanus.net/codrop/2014/01/09/sticky-table-headers-colums/

— প্রিটোরিয়ানএনজেড
সূত্র
9

আমি জেসফিডেলে কিছু পরিবর্তন করেছি। এটি আপনি যা করতে চেষ্টা করছেন তা হতে পারে।

http://jsfiddle.net/C8Dtf/81/

আমি এর মতো শিরোনামগুলিকে হার্ডকোড করেছি:

<table id="left_table" class="freeze_table">
    <tr class='tblTitle'>
         <th>Title 1</th>
         <th>Title 2</th>
    </tr>
</table>

এবং আমি পাশাপাশি কিছু শৈলী যুক্ত।

.tblTitle{
   position:absolute;
    top:0px;
    margin-bottom:30px;
    background:lightblue;
}
td, th{
    padding:5px;
    height:40px;
    width:40px;
    font-size:14px;
}

আশা করি এটিই আপনি চান :)

— ফিলিপ-জুয়ান
সূত্র
4
এর সামগ্রীর সাথে একসাথে স্ক্রোল করতে আমার ডান টেবিলের শিরোনাম প্রয়োজন।
— পানফিল
এখানে ইউআরএল: jsfiddle.net/C8Dtf/84 । দুটি টেবিল সারিবদ্ধ করার জন্য আপনার ডান-হাতের টেবিলের জন্য কেবল স্টাইলিংয়ের সাথে খেলা প্রয়োজন।
— ফিলিপ-জুয়ান
না, আপনি বেশ বুঝতে পারেন না। ডান টেবিলের শিরোনামটি শীর্ষে স্থির করতে আমার এটি দরকার যাতে টেবিলটি উপরে এবং নীচে স্ক্রোল করলে তা এখনও দৃশ্যমান হবে তবে যখন টেবিলটি ডান বা বাম শিরোনামটি ডান বা বামে স্ক্রোল করতে হবে তবে এখনও শীর্ষে স্থির করা উচিত। আমার খারাপ ইংরেজি দক্ষতার জন্য দুঃখিত।
— পানফিল
সুতরাং ডান হাতের টেবিলের শিরোনামটি উল্লম্বভাবে স্ক্রোল করার সময় স্থির করা এবং অনুভূমিকভাবে স্ক্রোল করার সময় স্ক্রোল করতে চান?
— ফিলিপ-জুয়ান
এটি আমি যে আচরণটি অর্জন করতে চাই তার উদাহরণ এটি: ডেটাবেলস.না.
— রিলিজ-
9

শুধুমাত্র সিএসএস ব্যবহার করে একটি উদাহরণ:

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

.header th {
  font-family: Calibri;
  font-size: small;
  font-weight: lighter;
  border-left: 1px solid #000;
  background: #d0d0d0;
}

.body_panel {
  display: inline-block;
  width: 520px;
  height: 300px;
  overflow-y: scroll;
}

.body tr {
  border-bottom: 1px solid #d0d0d0;
}

.body td {
  border-left: 1px solid #d0d0d0;
  padding-left: 3px;
  font-family: Calibri;
  font-size: small;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<body>

  <table class="table">

    <thead class="header">

      <tr>
        <th style="width:20%;">teste</th>
        <th style="width:30%;">teste 2</th>
        <th style="width:50%;">teste 3</th>
      </tr>

    </thead>
  </table>

  <div class="body_panel">

    <table class="table">
      <tbody class="body">

        <tr>
          <td style="width:20%;">asbkj k kajsb ksb kabkb</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

        <tr>
          <td style="width:20%;">2</td>
          <td style="width:30%;">2</td>
          <td style="width:50%;">3</td>
        </tr>

      </tbody>
    </table>

  </div>

</body>
স্নিপেট প্রসারিত করুন

— ডায়গো.জেএইচইউ
সূত্র
4
আমার কেবল হেডার ফিক্সড নয়, প্রথম কলামও দরকার ছিল।
— পানফিল
এই উদাহরণটি এইচটিএমএলে দুটি টেবিল সহ একটি পদ্ধতির দেখায়: একটি টেবিল কেবল শিরোনামকে রেন্ডার করে; দ্বিতীয় টেবিলটি কেবল সারিগুলি সরবরাহ করে তবে এটি একটি এর মধ্যে করে div। এটা divযে সারি-স্ক্রোল করার সময় একই জায়গায় হেডার থাকার বিষয়টি মতেই অনুমতি দেয়। এই পদ্ধতির আমার প্রয়োজনের জন্য কাজ করে।
— ডেভিড তানসেই
যদি আনুভূমিক স্ক্রোলিংটিও থাকে, সারণীর স্ক্রোল অবস্থানগুলি সিঙ্ক্রোনাইজ করতে আপনার কিছু জেএস দরকার।
— জুলটান তমাসি
4

আমি ইস্যুটির জন্য পল ওব্রায়নের একটি দুর্দান্ত সমাধান খুঁজে পেয়েছি এবং লিঙ্কটি ভাগ করতে চাই: https://codepen.io/paulobrien/pen/LBrMxa

আমি পাদলেখের জন্য শৈলী সরিয়েছি:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.intro {
  max-width: 1280px;
  margin: 1em auto;
}
.table-scroll {
  position: relative;
  width:100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
  height: 350px;
}
.table-scroll table {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrap {
  position: relative;
}
.table-scroll th,
.table-scroll td {
  padding: 5px 10px;
  border: 1px solid #000;
}
.table-scroll thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
}
thead th:first-child {
  z-index: 5;
}
— আর্টিয়াম কোজিরেভ
সূত্র
4

শিরোনাম এবং কলাম উভয়ই ঠিক করতে, আপনি নিম্নলিখিত প্লাগইনটি ব্যবহার করতে পারেন:

জুলাই 2019 এ আপডেট হয়েছে

সম্প্রতি এছাড়াও আবির্ভূত হয় একটি বিশুদ্ধ সিএসএস সমাধান যে সিএসএস সম্পত্তি উপর ভিত্তি করে তৈরি position: sticky;( এখানে এটি সম্পর্কে আরও বিস্তারিত জানার জন্য) প্রতিটি সম্মুখের প্রয়োগ THআইটেম (পরিবর্তে তাদের পিতা বা মাতা ধারক এর)

— লুকা ডিটোমি
সূত্র
4
প্রথম লিঙ্কটি নষ্ট হয়ে গেছে। দ্বিতীয়টি jQuery ব্যবহার করে।
— পুসইনবুটস
মৃত লিঙ্কটি অপসারণের জন্য আপডেট উত্তর
— লুকা ডিটোমি
2

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

http://jsfiddle.net/TinT/EzXub/2346/

var prevTop = 0;
var prevLeft = 0;

$(window).scroll(function(event){
  var currentTop = $(this).scrollTop();
  var currentLeft = $(this).scrollLeft();

  if(prevLeft !== currentLeft) {
    prevLeft = currentLeft;
    $('.header').css({'left': -$(this).scrollLeft()})
  }
  if(prevTop !== currentTop) {
    prevTop = currentTop;
    $('.leftCol').css({'top': -$(this).scrollTop() + 40})
  }
});
— ত্রিস্তান
সূত্র
1

একজন সহকর্মী এবং আমি সবেমাত্র একটি নতুন গিটহাব প্রকল্প প্রকাশ করেছি যা একটি কৌনিক নির্দেশ সরবরাহ করে যা আপনি স্থির শিরোনাম দিয়ে আপনার টেবিলটি সাজাতে ব্যবহার করতে পারেন: https://github.com/objectcomputing/FixedHeader

এটি কেবল সিএসএস এবং কৌণিকের উপর নির্ভর করে, এমন এক নির্দেশের সাথে যা কিছু ডিভ যোগ করে। কোন jQuery প্রয়োজন হয় না।

এই বাস্তবায়নটি অন্য কয়েকটি বাস্তবায়নের মতো পুরোপুরি বৈশিষ্ট্যযুক্ত নয়, তবে যদি আপনার প্রয়োজন কেবল স্থির সারণি যুক্ত করা হয় তবে আমরা মনে করি এটি একটি ভাল বিকল্প হতে পারে।

— ব্যবহারকারী 3221325
সূত্র
1

ইন্টারনেট এক্সপ্লোরার 9 + ক্রোম + ফায়ারফক্স (উইন্ডোজ) এবং সাফারি (ম্যাক) এর সাথে দু'দিন লড়াই করার পরে, আমি একটি সিস্টেম পেয়েছি যা

  • এই সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ
  • জাভাস্ক্রিপ্ট ব্যবহার না করে
  • কেবল আন ডিভ এবং একটি টেবিল ব্যবহার করা
  • স্থির শিরোনাম এবং পাদচরণ (আই আই ব্যতীত), স্ক্রোলযোগ্য বডি সহ। একই কলাম প্রস্থ সহ শিরোনাম এবং বডি

ফলাফল: এখানে চিত্র বর্ণনা লিখুন

এইচটিএমএল: 

  <thead>
    <tr>
      <th class="nombre"><%= f.label :cost_center %></th>
      <th class="cabecera cc">Personal</th>
      <th class="cabecera cc">Dpto</th>
    </tr>
  </thead>
  <tbody>
    <% @cost_centers.each do |cc| %>
    <tr>
      <td class="nombre"><%= cc.nombre_corto %></td>
      <td class="cc"><%= cc.cacentrocoste %></td>
      <td class="cc"><%= cc.cacentrocoste_dpto %></td>
    </tr>
    <% end %>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"><a href="#">Mostrar mas usuarios</a></td>
    </tr>
  </tfoot>
</table>

সিএসএস:

div.cost_center{
  width:320px;
  font-size:75%;
  margin-left:5px;
  margin-top:5px;
  margin-bottom: 2px;
  float: right;
  display: inline-block;
  overflow-y: auto;
  overflow-x: hidden;
  max-height:300px;  
}

div.cost_center label { 
  float:none;
  font-size:14px;
}

div.cost_center table{
  width:300px;
  border-collapse: collapse; 
  float:right;
  table-layout:fixed;
}

div.cost_center table tr{
  height:16px;
}
div.cost_center th{
  font-weight:normal;
}

div.cost_center table tbody{
  display: block;
  overflow: auto;
  max-height:240px;
}

div.cost_center table thead{
  display:block;
}

div.cost_center table tfoot{
  display:block;
}
div.cost_center table tfoot td{
  width:280px;
}
div.cost_center .cc{
  width:60px;
  text-align: center; 
  border: 1px solid #999;
}

div.cost_center .nombre{
  width:150px;
}
div.cost_center tbody .nombre{
  border: 1px solid #999;
}

div.cost_center table tfoot td{
 text-align:center;  
 border: 1px solid #999; 
} 

div.cost_center table th, 
div.cost_center table td { 
  padding: 2px;
  vertical-align: middle; 
}

div.cost_center table tbody td {
  white-space: normal;
  font:  .8em/1.4em Verdana, sans-serif;
  color: #000;
  background-color: white;
}
div.cost_center table th.cabecera { 
  font:  0.8em/1.4em Verdana, sans-serif;
  color: #000;
  background-color: #FFEAB5;
}
— কাতাল à
সূত্র
ভাল চেষ্টা, কিন্তু আমার জন্য খুব ভাল কাজ করে না। এই উদাহরণটিতে ( jsfiddle.net/5ka6e ), শিরোনামটি সঠিকভাবে আকার পরিবর্তন করে না। এই ধরণের ত্রুটিটি শেষ পর্যন্ত ডেটা এবং শিরোনামের সাথে মেলে না।
— ডার্কজনেল
4
আপনি যুক্ত করতে ভুলে div.cost_center table{border-collapse: collapse;}গেছেন এবং তৃতীয় ক্যাপশনটি এমন কিছু হতে হবে যা 60px এর মধ্যে ফিট করে (উদাহরণস্বরূপ)
— অ্যালবার্ট
1

বিদ্যমান উত্তরগুলি বেশিরভাগ লোকের জন্য উপযুক্ত হবে তবে যারা স্থির শিরোনামের নীচে এবং প্রথম (স্থির) কলামের ডানদিকে ছায়া যুক্ত করতে চাইছেন তাদের জন্য এখানে একটি কার্যকারী উদাহরণ (খাঁটি সিএসএস):

http://jsbin.com/nayifepaxo/1/edit?html, আউটপুট

কাজ করার জন্য এই পেয়ে প্রধান কৌতুক ব্যবহার করছে ::afterপ্রথম প্রতিটি ডানদিকে ছায়া যোগ করার জন্য tdপ্রতিটি tr:

tr td:first-child:after {
  box-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.05) inset;
  content: "";
  position:absolute;
  top:0;
  bottom:0;
  right:-15px;
  width:15px;
}

এগুলি সব কাজ করার জন্য আমাকে কিছুটা সময় (খুব দীর্ঘ ...) নিয়েছে তাই আমি বুঝতে পেরেছিলাম যারা একইরকম পরিস্থিতিতে আছেন তাদের জন্য ভাগ করে নিই।

আপনি কি এর ভিত্তিতে কোনও এলিসের উত্তর এবং ছায়া যুক্ত করেছেন?
— পুসইনবুটস
1

কোড স্নিপেট দেখান

হেডার পাদচরণ ঠিক করা প্রয়োজন

— নীল উপাধ্যায়
সূত্র
0

এর মতো কিছু আপনার পক্ষে কাজ করতে পারে ... সম্ভবত আপনার শিরোনাম সারিটির জন্য কলামের প্রস্থগুলি নির্ধারণ করা প্রয়োজন।

thead { 
    position: fixed;
}

http://jsfiddle.net/vkhNC/

হালনাগাদ:

আমি নিশ্চিত নই যে আপনি যে উদাহরণ দিয়েছেন তা কেবল সিএসএস দ্বারা সম্ভব। কারওর জন্য আমাকে ভুল প্রমাণ করতে চাই। আমার এখন পর্যন্ত যা আছে তা এখানে । এটি সমাপ্ত পণ্য নয় তবে এটি আপনার জন্য একটি সূচনা হতে পারে। আমি আশা করি এটি আপনাকে যেখানে সহায়ক হতে পারে সেখানেই নির্দেশনা দেয়।

— ব্র্যাডজ
সূত্র
আমার কেবল শিরোনামের দরকার নেই, তবে প্রথম কলামটিও ঠিক করা হয়েছে।
— পানফিল
5
শিরোনামগুলি তাদের প্রস্থকে আলগা করে তুলতে সমস্যা। এটি বিভিন্ন শিরোনাম কলামের আকার এবং ডেটা কলামের আকারের সাথে কুরুচিপূর্ণ দেখাচ্ছে।
— আকাশ কাভা
0

আরেকটি সমাধান হ'ল অ্যাঙ্গুলারজেএস ব্যবহার করা। অ্যাঙ্গুলারআইআই মডিউলের একটি নির্দেশনা রয়েছে ng-gridযা কলাম পিনিং নামে একটি বৈশিষ্ট্য সমর্থন করে। এটি 100% খাঁটি সিএসএস নয় তবে এটির অন্যান্য সমাধানও নয়।

http://angular-ui.github.io/ng-grid/#columnPinning

— ল্যানোএক্সএক্স
সূত্র
0

খাঁটি সিএসএস উদাহরণ:

<div id="cntnr">
    <div class="tableHeader">
        <table class="table-header table table-striped table-bordered">
            <thead>
                <tr>
                    <th>this</th>
                    <th>transmission</th>
                    <th>is</th>
                    <th>coming</th>
                    <th>to</th>
                    <th>you</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>we've got it...</td>
                    <td>alright you are go</td>
                    <td>uh, we see the Earth now</td>
                    <td>we've got it...</td>
                    <td>alright you are go</td>
                    <td>uh, we see the Earth now</td>
                </tr>
            </tbody>
        </table>
    </div>


    <div class="tableBody">
        <table class="table-body table table-striped table-bordered">
            <thead>
                <tr>
                    <th>this</th>
                    <th>transmission</th>
                    <th>is</th>
                    <th>coming</th>
                    <th>to</th>
                    <th>you</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>we've got it...</td>
                    <td>alright you are go</td>
                    <td>uh, we see the Earth now</td>
                    <td>we've got it...</td>
                    <td>alright you are go</td>
                    <td>uh, we see the Earth now</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

#cntnr {
    width: auto;
    height: 200px;
    border: solid 1px #444;
    overflow: auto;
}

.tableHeader {
    position: fixed;
    height: 40px;
    overflow: hidden;
    margin-right: 18px;
    background: white;
}

.table-header tbody {
    height: 0;
    visibility: hidden;
}

.table-body thead {
    height: 0;
    visibility: hidden;
}

http://jsfiddle.net/cCarlson/L98m854d/

অপূর্ণতা: সংশোধন করা হয়েছে হেডার গঠন / যুক্তিবিজ্ঞান মোটামুটি নির্দিষ্ট মাত্রা উপর নির্ভরশীল, তাই বিমূর্ততা সম্ভবত একটি টেকসই বিকল্প নয় ।

— কোডি
সূত্র
উভয় স্থির শিরোনাম এবং স্থির প্রথম কলাম প্রয়োজন।
— পানফিল
আহ ... এই নির্দেশ করার জন্য ধন্যবাদ, পানফিল। আমি একটি সম্পাদনা করব। চিয়ার্স
— কোডি
0

অবস্থান: স্টিমি ক্রোমে কিছু কিছু উপাদান (থ্যাড) এবং সাফারির মতো অন্যান্য ওয়েবকিট ব্রাউজারগুলির জন্য কাজ করে না।

তবে এটি (ম) এর সাথে ভাল কাজ করে

body {
  background-color: rgba(0, 255, 200, 0.1);
}

.intro {
  color: rgb(228, 23, 23);
}

.wrapper {
  overflow-y: scroll;
  height: 300px;
}

.sticky {
  position: sticky;
  top: 0;
  color: black;
  background-color: white;
}
<div class="container intro">
  <h1>Sticky Table Header</h1>
  <p>Postion : sticky doesn't work for some elements like (thead) in chrome and other webkit browsers like safari. </p>
  <p>But it works fine with (th)</p>
</div>
<div class="container wrapper">
  <table class="table table-striped">
    <thead>
      <tr>
        <th class="sticky">Firstname</th>
        <th class="sticky">Lastname</th>
        <th class="sticky">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>James</td>
        <td>Vince</td>
        <td>james@example.com</td>
      </tr>
      <tr>
        <td>Jonny</td>
        <td>Bairstow</td>
        <td>jonny@example.com</td>
      </tr>
      <tr>
        <td>James</td>
        <td>Anderson</td>
        <td>james@example.com</td>
      </tr>
      <tr>
        <td>Stuart</td>
        <td>Broad</td>
        <td>stuart@example.com</td>
      </tr>
      <tr>
        <td>Eoin</td>
        <td>Morgan</td>
        <td>eoin@example.com</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Root</td>
        <td>joe@example.com</td>
      </tr>
      <tr>
        <td>Chris</td>
        <td>Woakes</td>
        <td>chris@example.com</td>
      </tr>
      <tr>
        <td>Liam</td>
        <td>PLunkett</td>
        <td>liam@example.com</td>
      </tr>
      <tr>
        <td>Jason</td>
        <td>Roy</td>
        <td>jason@example.com</td>
      </tr>
      <tr>
        <td>Alex</td>
        <td>Hales</td>
        <td>alex@example.com</td>
      </tr>
      <tr>
        <td>Jos</td>
        <td>Buttler</td>
        <td>jos@example.com</td>
      </tr>
      <tr>
        <td>Ben</td>
        <td>Stokes</td>
        <td>ben@example.com</td>
      </tr>
      <tr>
        <td>Jofra</td>
        <td>Archer</td>
        <td>jofra@example.com</td>
      </tr>
      <tr>
        <td>Mitchell</td>
        <td>Starc</td>
        <td>mitchell@example.com</td>
      </tr>
      <tr>
        <td>Aaron</td>
        <td>Finch</td>
        <td>aaron@example.com</td>
      </tr>
      <tr>
        <td>David</td>
        <td>Warner</td>
        <td>david@example.com</td>
      </tr>
      <tr>
        <td>Steve</td>
        <td>Smith</td>
        <td>steve@example.com</td>
      </tr>
      <tr>
        <td>Glenn</td>
        <td>Maxwell</td>
        <td>glenn@example.com</td>
      </tr>
      <tr>
        <td>Marcus</td>
        <td>Stoinis</td>
        <td>marcus@example.com</td>
      </tr>
      <tr>
        <td>Alex</td>
        <td>Carey</td>
        <td>alex@example.com</td>
      </tr>
      <tr>
        <td>Nathan</td>
        <td>Coulter Nile</td>
        <td>nathan@example.com</td>
      </tr>
      <tr>
        <td>Pat</td>
        <td>Cummins</td>
        <td>pat@example.com</td>
      </tr>
      <tr>
        <td>Adam</td>
        <td>Zampa</td>
        <td>zampa@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
স্নিপেট প্রসারিত করুন

বা আমার কোডেন উদাহরণটি দেখুন :

— যোগ
সূত্র
-1

আমি মনে করি এটি আপনাকে সহায়তা করবে: https://datatables.net/release-datatables/extensions/FixedHeader/example/ Header_footer.html

সংক্ষেপে, আপনি যদি ডেটা টেবিলটি তৈরি করতে জানেন তবে আপনার কেবল নীচে এই jQuery লাইনটি যুক্ত করতে হবে:

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

    new $.fn.dataTable.FixedHeader( table, {
        bottom: true
    } );
} );

নীচে: সত্য // নীচের শিরোনামটি ঠিক করার জন্য।

— জ্যাকস্প্যারো
সূত্র
-2

আপনি যদি কেবল খাঁটি এইচটিএমএল এবং সিএসএস ব্যবহার করতে চান তবে আমি আপনার সমস্যার সমাধান পেয়েছি:
এই জেএসফিডেলে আপনি একটি নন-স্ক্রিপ্ট সমাধান দেখতে পারেন যা একটি নির্দিষ্ট শিরোনাম সহ একটি সারণী সরবরাহ করে। কোনও নির্দিষ্ট প্রথম কলামের পাশাপাশি মার্কআপটি মানিয়ে নিতে সমস্যা হওয়া উচিত নয়। আপনাকে কেবলমাত্র hWrapper-Div এর ভিতরে প্রথম কলামের জন্য একটি পরম- অবস্থানীয় সারণী তৈরি করতে হবে এবং vWrapper-ডিবটি পুনরায় স্থাপন করতে হবে।
গতিশীল সামগ্রী সরবরাহ করা সার্ভার-সাইড বা ব্রাউজার-সাইড লোভনীয় ইঞ্জিনগুলি ব্যবহার করে সমস্যা হওয়া উচিত নয়, আমার সমাধান আইই 8 এর পরে সমস্ত আধুনিক ব্রাউজার এবং পুরানো ব্রাউজারগুলিতে ভাল কাজ করে।

— লুকাস হেচেনবার্গার
সূত্র
-2

যেমন শৈলী পরিবর্তন করা প্রয়োজন 

<table style="position: relative;">
   <thead>
      <thead>
        <tr>
           <th></th>
        </tr>
      </thead>
   </thead>
   <tbody style="position: absolute;height: 300px;overflow:auto;">
      <tr>
         <td></td>
      </tr>
   </tbody>
</table>

ডেমো: https://plnkr.co/edit/Qxy5RMJBXmkaJAOjBtQn?p= পূর্বরূপ

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