এইচট - html লিংক



টিবি ভিতরে উল্লম্ব স্ক্রোল সহ 100% প্রস্থ সহ HTML টেবিল (7)

আমি কিভাবে <table> 100% প্রস্থের জন্য সেট করব এবং কিছু উচ্চতার জন্য কেবল <tbody> উল্লম্ব স্ক্রোলটি ভিতরে <tbody> ?

table {
    width: 100%;
    display:block;
}
thead {
    display: inline-block;
    width: 100%;
    height: 20px;
}
tbody {
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}
  
<table>
  <thead>
    <tr>
    	<th>Head 1</th>
    	<th>Head 2</th>
    	<th>Head 3</th>
    	<th>Head 4</th>
    	<th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td>Content 1</td>
    	<td>Content 2</td>
    	<td>Content 3</td>
    	<td>Content 4</td>
    	<td>Content 5</td>
    </tr>
  </tbody>
</table>

আমি কিছু অতিরিক্ত ডিভি যোগ করা এড়িয়ে চলতে চাই, আমি চাই এটির মতই সহজ টেবিল এবং যখন আমি CSS টেবিলে প্রদর্শন, table-layout , position এবং আরো অনেক কিছু পরিবর্তন করার চেষ্টা করি, তখন পক্সের নির্দিষ্ট প্রস্থের সাথে 100% প্রস্থের সাথে ভাল কাজ করে না। ।

https://src-bin.com


Answer #1

কলামগুলিকে একটি 'ব্লক' ট্যাব দিয়ে সঠিকভাবে প্রদর্শন করার জন্য CSS কার্যকারিতা

এই সমাধান এখনও চতুর্থাংশ গণনা করা এবং jQuery দ্বারা সেট করা প্রয়োজন

table.scroll tbody,
table.scroll thead { display: block; }

table.scroll tbody {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
}

table.scroll tr {
    display: flex;
}

table.scroll tr > td {
    flex-grow: 1;
    flex-basis: 0;
}

এবং Jquery / জাভাস্ক্রিপ্ট

var $table = $('#the_table_element'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

$table.addClass('scroll');

// Adjust the width of thead cells when window resizes
$(window).resize(function () {

    // Get the tbody columns width array
    colWidth = $bodyCells.map(function () {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function (i, v) {
        $(v).width(colWidth[i]);
    });

}).resize(); // Trigger resize handler

Answer #2

আধুনিক ব্রাউজারে, আপনি কেবল CSS ব্যবহার করতে পারেন:

th {
  position: sticky;
  top: 0;
  z-index: 2;
}

Answer #3

আমি নিখুঁত সিএসএস দিয়ে এই নির্দেশাবলী অনুসরণ করে এটি অধিকার পেয়েছিলাম:

http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/

প্রথম পদক্ষেপটি <tbody> প্রদর্শনের জন্য সেট করা হল: ব্লক তাই ওভারফ্লো এবং উচ্চতা প্রয়োগ করা যেতে পারে। সেখানে থেকে <thead> সারিতে অবস্থানগুলি সেট করতে হবে: আপেক্ষিক এবং প্রদর্শন: অবরোধ করুন যাতে তারা এখন স্ক্রোলযোগ্য <tbody> এর উপরে বসবে।

tbody, thead { display: block; overflow-y: auto; }

কারণ <thead> অপেক্ষাকৃত <thead> প্রতিটি টেবিল <thead> একটি স্পষ্ট প্রস্থের প্রয়োজন

td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

কিন্তু দুর্ভাগ্যবশত যে যথেষ্ট নয়। যখন একটি স্ক্রলবার উপস্থিত থাকে তখন ব্রাউজার এটির জন্য স্থান বরাদ্দ করে, সুতরাং, <tbody> এর চেয়ে কম স্থান উপলব্ধ হয়। সামান্য misalignment এই লক্ষ্য করে লক্ষ্য করুন ...

শেষ কাজটি ব্যতীত সকল কলামে মিনি-প্রস্থ সেট করতে আমি কেবলমাত্র একমাত্র সমাধান করতে পারতাম।

td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

নীচের পুরো কোডপেন উদাহরণ:

সিএসএস:

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333333;
  color: #fdfdfd;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #dddddd;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

এইচটিএমএল:

<!-- IE < 10 does not like giving a tbody a height.  The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->

<table class="fixed_headers">
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Plum</td>
      <td>Purple</td>
      <td>These are Purple</td>
    </tr>
    <tr>
      <td>Watermelon</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Tomato</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cantelope</td>
      <td>Orange</td>
      <td>These are orange inside.</td>
    </tr>
    <tr>
      <td>Honeydew</td>
      <td>Green</td>
      <td>These are green inside.</td>
    </tr>
    <tr>
      <td>Papaya</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Raspberry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Blueberry</td>
      <td>Blue</td>
      <td>These are blue.</td>
    </tr>
    <tr>
      <td>Mango</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Passion Fruit</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

<!--[if lte IE 9]>
</div>
<!--<![endif]-->

সম্পাদনা করুন: টেবিলের প্রস্থের জন্য বিকল্প সমাধান 100% (প্রকৃতপক্ষে স্থির প্রস্থের জন্য এবং প্রশ্নের উত্তর দেওয়া হয়নি):

এইচটিএমএল:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

সিএসএস:

table {
  width: 100%;
  text-align: left;
  min-width: 610px;
}
tr {
  height: 30px;
  padding-top: 10px
}
tbody { 
  height: 150px; 
  overflow-y: auto;
  overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {
  width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
  width: 20%;
  float: left;
}
td:nth-child(3),
th:nth-child(3) {
  width: 59%;
  float: left;
}
/* some colors */
thead {
  background-color: #333333;
  color: #fdfdfd;
}
table tbody tr:nth-child(even) {
  background-color: #dddddd;
}

ডেমো: http://codepen.io/anon/pen/bNJeLO


Answer #4

উপাদানটি স্ক্রোলযোগ্য <tbody> তৈরি করতে, আমাদের পৃষ্ঠাতে display: block; <tbody> পরিবর্তন display: block; ব্যবহার করে পরিবর্তন করতে হবে display: block; একটি ব্লক স্তর উপাদান হিসাবে প্রদর্শন করতে।

যেহেতু আমরা tbody এর display সম্পত্তি পরিবর্তন tbody , তাই আমাদের সেই উপাদানটি thead লেআউটটি ভেঙে বাধা দেওয়ার পাশাপাশি thead উপাদানটির জন্যও পরিবর্তন করা উচিত।

তাহলে আমাদের আছে:

thead, tbody { display: block; }

tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

ওয়েব ব্রাউজার thead সারি-গোষ্ঠী ( table-header-group এবং table-row-group ) হিসাবে thead এবং tbody উপাদানগুলি প্রদর্শন করে।

একবার আমরা যে পরিবর্তন, অভ্যন্তরীণ tr উপাদান তাদের ধারক সমগ্র স্থান পূরণ না।

এটি ঠিক করার জন্য, আমাদের tbody কলামের প্রস্থ গণনা করতে হবে এবং জাভাস্ক্রিপ্টের মাধ্যমে thead কলামগুলিতে সংশ্লিষ্ট মান প্রয়োগ করতে হবে।

অটো প্রস্থ কলাম

এখানে উপরের যুক্তি এর jQuery সংস্করণ:

// Change the selector if needed
var $table = $('table'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});    

এবং এখানে আউটপুট (উইন্ডোজ 7 ক্রোম 32) :

কাজ Demo

পূর্ণ প্রস্থ সারণী, আপেক্ষিক প্রস্থ কলাম

আসল পোস্টারের প্রয়োজন অনুসারে, আমরা table তার পাত্রে 100% width প্রসারিত করতে পারি এবং তারপরে টেবিলে প্রতিটি কলামগুলির জন্য একটি আপেক্ষিক ( শতাংশ ) width ব্যবহার করতে পারি।

table {
    width: 100%; /* Optional */
}

tbody td, thead th {
    width: 20%;  /* Optional */
}

টেবিলে একটি (সাজানো) তরল লেআউট রয়েছে , তাই কনটেইনারটি thead কলামগুলির প্রস্থ সামঞ্জস্য করতে হবে।

উইন্ডোটি পুনরায় আকার দেওয়ার পরে আমাদের কলামগুলির 'প্রস্থগুলি সেট করা উচিত:

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
    /* Same as before */ 
}).resize(); // Trigger the resize handler once the script runs

আউটপুট হবে:

কাজ Demo

ব্রাউজার সাপোর্ট এবং বিকল্প

আমি উইন্ডোজ 7 এর দুটি উপরের পদ্ধতির প্রধান ওয়েব ব্রাউজারগুলির নতুন সংস্করণ (IE10 + সহ) এর মাধ্যমে পরীক্ষা করেছি এবং এটি কাজ করেছে।

যাইহোক, এটি IE9 এবং নীচে properly work doesn't

যেহেতু একটি টেবিল বিন্যাসে , সমস্ত উপাদান একই কাঠামোগত বৈশিষ্ট্য অনুসরণ করা উচিত।

display: block; ব্যবহার করে display: block; <thead> এবং <tbody> উপাদানগুলির জন্য, আমরা টেবিলের কাঠামোটি ভেঙ্গেছি।

জাভাস্ক্রিপ্ট মাধ্যমে বিন্যাস নকশা

এক পদ্ধতির (সম্পূর্ণ) টেবিল লেআউট পুনরায় ডিজাইন করা হয়। ফ্লাই এ নতুন লেআউট তৈরি করতে এবং জাভাস্ক্রিপ্ট ব্যবহার করে এবং / অথবা গতিশীল কোষগুলির প্রস্থ / উচ্চতা সামঞ্জস্য করুন।

উদাহরণস্বরূপ, নিচের উদাহরণগুলি দেখুন:

Nesting টেবিল

এই পদ্ধতির একটি ধারণকারী div সঙ্গে দুটি নেস্টেড টেবিল ব্যবহার করে। প্রথম table শুধুমাত্র একটি ঘর রয়েছে যা একটি div এবং দ্বিতীয় টেবিলটিকে div উপাদানটির ভিতরে রাখা হয়।

সিএসএস প্লেউল্লম্ব স্ক্রোলিং টেবিল পরীক্ষা করুন।

এই ওয়েব ব্রাউজার অধিকাংশ কাজ করে। আমরা জাভাস্ক্রিপ্টের মাধ্যমে গতিশীলভাবে উপরের যুক্তিটিও করতে পারি।

স্ক্রোল উপর নির্দিষ্ট শিরোনাম সঙ্গে টেবিল

<tbody> উল্লম্ব স্ক্রোল বার যোগ করার উদ্দেশ্যটি প্রতিটি সারির শীর্ষে টেবিল শিরোনাম প্রদর্শন করা হচ্ছে, পরিবর্তে পর্দার শীর্ষে fixed থাকার জন্য আমরা উপাদানটি fixed রাখতে পারি।

এখানে Julien দ্বারা সঞ্চালিত এই পদ্ধতির একটি ওয়ার্কিং ডেমো
এটি একটি প্রতিশ্রুতিশীল ওয়েব ব্রাউজার সমর্থন আছে।

এবং here একটি বিশুদ্ধ CSS বাস্তবায়ন উইলম ভ্যান Bockstal দ্বারা ।

বিশুদ্ধ CSS সমাধান

এখানে পুরানো উত্তর। অবশ্যই আমি একটি নতুন পদ্ধতি যোগ করেছি এবং CSS ঘোষণাগুলিকে পরিমার্জিত করেছি।

স্থায়ী প্রস্থ সঙ্গে টেবিল

এই ক্ষেত্রে, table একটি নির্দিষ্ট width থাকা উচিত (কলামের প্রস্থের সমষ্টি এবং উল্লম্ব স্ক্রোল-বারের width সহ)

প্রতিটি কলামে একটি নির্দিষ্ট প্রস্থ থাকা উচিত এবং thead উপাদানটির শেষ কলামটির একটি বৃহত্তর প্রস্থের প্রয়োজন যা অন্যের প্রস্থের সমান + উল্লম্ব স্ক্রোল-বারের প্রস্থ

অতএব, সিএসএস হবে:

table {
    width: 716px; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
}

tbody, thead tr { display: block; }

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 140px;
}

thead th:last-child {
    width: 156px; /* 140px + 16px scrollbar width */
}

এখানে আউটপুট হয়:

কাজ Demo

100% প্রস্থ সঙ্গে টেবিল

এই পদ্ধতিতে, table 100% প্রস্থ এবং প্রতিটি th এবং td জন্য width সম্পত্তির মান 100% / number of cols কম হওয়া উচিত।

এছাড়াও, আমরা উল্লম্ব স্ক্রোল-বারের প্রস্থের মান হিসাবে thead প্রস্থকে হ্রাস করতে হবে।

এটি করার জন্য, আমাদেরকে CSS3 calc() ফাংশনটি ব্যবহার করতে হবে:

table {
    width: 100%;
    border-spacing: 0;
}

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

thead tr {
    /* fallback */
    width: 97%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
    float: left;
}

এখানে অনলাইন ডেমো

দ্রষ্টব্য: প্রতিটি কলামের বিষয়বস্তু লাইন ভেঙ্গে গেলে, এই পদ্ধতিটি ব্যর্থ হবে, অর্থাত প্রতিটি কক্ষের বিষয়বস্তু যথেষ্ট ছোট হওয়া উচিত

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

এখানে JsFiddle ডেমো v2

পুরানো সংস্করণ: জেএসফিল্ড ডেমো v1


Answer #5

নিচের সমাধানগুলিতে, টেবিলে 100% মূল পাত্রের অধিকার রয়েছে, কোন পরম মাপ প্রয়োজন। এটা বিশুদ্ধ সিএসএস, flex লেআউট ব্যবহার করা হয়।

এখানে এটি কেমন দেখায়:

সম্ভাব্য অসুবিধাসমূহ:

  • উল্লম্ব স্ক্রলবার সর্বদা দৃশ্যমান, এটি প্রয়োজন কিনা তা নির্বিশেষে;
  • টেবিল লেআউট সংশোধন করা হয়েছে - কলামগুলি বিষয়বস্তু প্রস্থ অনুযায়ী আকার পরিবর্তন করে না (আপনি এখনও যেকোনো কলাম প্রস্থটি স্পষ্টভাবে সেট করতে পারেন);
  • স্ক্রলবারের প্রস্থ যা ব্রাউজারের জন্য 0.9em এর প্রস্থের একটি নিখুঁত আকার আছে।

এইচটিএমএল (সংক্ষিপ্ত):

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            ...
        </tbody>
    </table>
</div>

সিএসএস, কিছু সজ্জা সঙ্গে স্বচ্ছতার জন্য বাদ দেওয়া:

.table-container {
    height: 10em;
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead, table tbody tr {
    display: table;
    table-layout: fixed;
}

jsfiddle উপর সম্পূর্ণ কোড

কম কোড একই যাতে আপনি এটি মিশ্রিত করতে পারেন:

.table-scrollable() {
  @scrollbar-width: 0.9em;
  display: flex;
  flex-flow: column;

  thead,
  tbody tr {
    display: table;
    table-layout: fixed;
  }

  thead {
    flex: 0 0 auto;
    width: ~"calc(100% - @{scrollbar-width})";
  }

  tbody {
    display: block;
    flex: 1 1 auto;
    overflow-y: scroll;

    tr {
      width: 100%;
    }
  }
}

Answer #6

পদ্ধতির নিচে চেষ্টা করুন, বাস্তবায়ন খুব সহজ

নীচে jsfiddle লিঙ্ক

http://jsfiddle.net/v2t2k8ke/2/

এইচটিএমএল:

<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>

সিএসএস:

 #tbl_cnt{
 border-collapse: collapse; width: 100%;word-break:break-all;
 }
 #tbl_cnt thead, #tbl_cnt tbody{
 display: block;
 }
 #tbl_cnt thead tr{
 background-color: #8C8787; text-align: center;width:100%;display:block;
 }
 #tbl_cnt tbody {
 height: 100px;overflow-y: auto;overflow-x: hidden;
 }

jQuery:

 var data = [
    {
    "status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
    },{    "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
    },{
    "status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
    },{
    "status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
    }
    ];
   var sth = '';
   $.each(data[0], function (key, value) {
     sth += '<td>' + key + '</td>';
   });
   var stb = '';        
   $.each(data, function (key, value) {
       stb += '<tr>';
       $.each(value, function (key, value) {
       stb += '<td>' + value + '</td>';
       });
       stb += '</tr>';
    });
      $('#tbl_cnt thead tr').append(sth);
      $('#tbl_cnt tbody').append(stb);
      setTimeout(function () {
      var col_cnt=0 
      $.each(data[0], function (key, value) {col_cnt++;});    
      $('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px');
      $('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width',  ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)

Answer #7

TD তে একটি নির্দিষ্ট প্রস্থ যোগ করা , টিডি তৈরি করার পরে th এবং থ্যাড ডিসপ্লে ব্লক পুরোপুরি কাজ করে এবং আমরা স্ক্রোল বারটি সুন্দর করতে slimscroll প্লাগইনটি ব্যবহার করতে পারি।

<!DOCTYPE html>
<html>

<head>
    <title> Scrollable table </title>
    <style>
        body {
            font-family: sans-serif;
            font-size: 0.9em;
        }
        table {
            border-collapse: collapse;
            border-bottom: 1px solid #ddd;
        }
        thead {
            background-color: #333;
            color: #fff;
        }
        thead,tbody {
            display: block;
        }
        th,td {
            padding: 8px 10px;
            border: 1px solid #ddd;
            width: 117px;
            box-sizing: border-box;
        }
        tbody {
            height: 160px;
            overflow-y: scroll
        }
    </style>
</head>

<body>

    <table class="example-table">
        <thead>
            <tr>
                <th> Header 1 </th>
                <th> Header 2 </th>
                <th> Header 3 </th>
                <th> Header 4 </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Row 1- Col 1 </td>
                <td> Row 1- Col 2 </td>
                <td> Row 1- Col 3 </td>
                <td> Row 1- Col 4 </td>
            </tr>
            <tr>
                <td> Row 2- Col 1 </td>
                <td> Row 2- Col 2 </td>
                <td> Row 2- Col 3 </td>
                <td> Row 2- Col 4 </td>
            </tr>
            <tr>
                <td> Row 3- Col 1 </td>
                <td> Row 3- Col 2 </td>
                <td> Row 3- Col 3 </td>
                <td> Row 3- Col 4 </td>
            </tr>
            <tr>
                <td> Row 4- Col 1 </td>
                <td> Row 4- Col 2 </td>
                <td> Row 4- Col 3 </td>
                <td> Row 4- Col 4 </td>
            </tr>
            <tr>
                <td> Row 5- Col 1 </td>
                <td> Row 5- Col 2 </td>
                <td> Row 5- Col 3 </td>
                <td> Row 5- Col 4 </td>
            </tr>
            <tr>
                <td> Row 6- Col 1 </td>
                <td> Row 6- Col 2 </td>
                <td> Row 6- Col 3 </td>
                <td> Row 6- Col 4 </td>
            </tr>
            <tr>
                <td> Row 7- Col 1 </td>
                <td> Row 7- Col 2 </td>
                <td> Row 7- Col 3 </td>
                <td> Row 7- Col 4 </td>
            </tr>
            <tr>
                <td> Row 8- Col 1 </td>
                <td> Row 8- Col 2 </td>
                <td> Row 8- Col 3 </td>
                <td> Row 8- Col 4 </td>
            </tr>
            <tr>
                <td> Row 9- Col 1 </td>
                <td> Row 9- Col 2 </td>
                <td> Row 9- Col 3 </td>
                <td> Row 9- Col 4 </td>
            </tr>
            <tr>
                <td> Row 10- Col 1 </td>
                <td> Row 10- Col 2 </td>
                <td> Row 10- Col 3 </td>
                <td> Row 10- Col 4 </td>
            </tr>
            <tr>
                <td> Row 11- Col 1 </td>
                <td> Row 11- Col 2 </td>
                <td> Row 11- Col 3 </td>
                <td> Row 11- Col 4 </td>
            </tr>
            <tr>
                <td> Row 12- Col 1 </td>
                <td> Row 12- Col 2 </td>
                <td> Row 12- Col 3 </td>
                <td> Row 12- Col 4 </td>
            </tr>
            <tr>
                <td> Row 13- Col 1 </td>
                <td> Row 13- Col 2 </td>
                <td> Row 13- Col 3 </td>
                <td> Row 13- Col 4 </td>
            </tr>
            <tr>
                <td> Row 14- Col 1 </td>
                <td> Row 14- Col 2 </td>
                <td> Row 14- Col 3 </td>
                <td> Row 14- Col 4 </td>
            </tr>
            <tr>
                <td> Row 15- Col 1 </td>
                <td> Row 15- Col 2 </td>
                <td> Row 15- Col 3 </td>
                <td> Row 15- Col 4 </td>
            </tr>
            <tr>
                <td> Row 16- Col 1 </td>
                <td> Row 16- Col 2 </td>
                <td> Row 16- Col 3 </td>
                <td> Row 16- Col 4 </td>
            </tr>
        </tbody>
    </table>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
    <script>
        $('.example-table tbody').slimscroll({
            height: '160px',
            alwaysVisible: true,
            color: '#333'
        })
    </script>
</body>

</html>





vertical-scrolling