সারণী স্থির শিরোনাম এবং স্ক্রোলযোগ্য বডি

255

আমি বুটস্ট্র্যাপ 3 টেবিল ব্যবহার করে স্থির শিরোনাম এবং একটি স্ক্রোলযোগ্য সামগ্রী দিয়ে একটি টেবিল তৈরি করার চেষ্টা করছি। দুর্ভাগ্যক্রমে আমি যে সমাধানগুলি পেয়েছি সেগুলি বুটস্ট্র্যাপ বা শৈলীতে বিশৃঙ্খলা নিয়ে কাজ করে না।

এখানে একটি সাধারণ বুটস্ট্র্যাপ টেবিল রয়েছে, তবে কোনও কারণে আমার কাছে অজানা টিডিটির উচ্চতা 10px নয়।

height: 10px !important; overflow: scroll;

উদাহরণ:

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

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>
স্নিপেট প্রসারিত করুন

html  css  twitter-bootstrap  html-table 
— Giulio
সূত্র
4
এটা কি সাহায্য করে? stackoverflow.com/a/17380697/1725764
— হাশেম Qolami
এটি অবশ্যই আমাকে সাহায্য করেছিল। এখানে সমাধান jsfiddle.net/T9Bhm/7 আপনাকে ধন্যবাদ
— giulio
Td উচ্চতা মেলে না যখন সারণী-স্ট্রিপযুক্ত বৈশিষ্ট্যটি সঠিকভাবে পরিচালনা করে না। jsfiddle.net/T9Bhm/4755 যোগ করা টিডি {ওভারফ্লো-মোড়ানো দেখুন: বিরতি-শব্দ; I যে আমি যুক্ত করেছি
— জন জাব্রোস্কি

উত্তর:

252

স্থির টেবিলের মাথা - সিএসএস-কেবল only

কেবল position: sticky; top: 0;আপনার thউপাদান। (ক্রোম, এফএফ, এজ)

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

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>
স্নিপেট প্রসারিত করুন

TH সমস্যা সমাধানের সীমানা

যেহেতু borderকোনও অনুবাদক THউপাদানটিতে সঠিকভাবে আঁকা যায় না , পুনরায় তৈরি করতে এবং "সীমানা" রেন্ডার করতে box-shadowসম্পত্তিটি ব্যবহার করুন :

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

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

স্থির টেবিলের মাথা - জেএস ব্যবহার করে। (আইই)

আপনি জাতীয় এবং একটি বিট ব্যবহার করতে পারেন translateYth উপাদান

jQuery উদাহরণ

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

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

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
স্নিপেট প্রসারিত করুন

অথবা আপনি যদি পছন্দ করেন তবে সরল ES6 (কোনও jQuery প্রয়োজন নেই):

// Fix table head
function tableFixHead (e) {
    const el = e.target,
          sT = el.scrollTop;
    el.querySelectorAll("thead th").forEach(th => 
      th.style.transform = `translateY(${sT}px)`
    );
}
document.querySelectorAll(".tableFixHead").forEach(el => 
    el.addEventListener("scroll", tableFixHead)
);
— রোকো সি বুলজান
সূত্র
12
বাহ, এটি সর্বনিম্ন ওভারহেড সহ সেরা বিকল্প! এবং এটি বাক্সের বাইরেও ওভারফ্লো-এক্স নিয়ে কাজ করে।
— কামনা করুন
1
হ্যাঁ! পরিবর্তনশীল কক্ষের প্রস্থের সাথেও কাজ করে (অন্যান্য উদাহরণের মতো সেল প্রস্থকে হার্ডকোড দেওয়ার দরকার নেই) @ উইশ
— রোকো সি
2
দুর্দান্ত সমাধান! আপনাকে ধন্যবাদ
— দিমিত্রি নিচিপোরেনকো
2
আমি দেখতে পেয়েছি যে এটি ক্রোম এবং ফায়ারফক্সে কাজ করে তবে শিরোনামগুলি এই পদ্ধতির ব্যবহার করে এজ বা IE11 এ স্থির করা হবে না।
— জেফ
2
উপরের উদাহরণগুলিতে @ পুসইনবুটস? Chrome রয়েছে? কিছুই লাফ দেয় না
— রোকো সি বুলজান
88

সম্ভবত আপনি এক পৃষ্ঠায় একাধিক টেবিল পাবেন, সুতরাং আপনার সিএসএস ক্লাস প্রয়োজন। দয়া করে এটির জন্য একটি পরিবর্তিত @ জিওলিওর সমাধান পান।

এটি কেবল টেবিলে ঘোষণা করুন:

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

সিএসএস

.header-fixed {
    width: 100% 
}

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

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

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

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

সচেতন থাকুন যে বর্তমান বাস্তবায়নটি কেবল পাঁচটি কলামের জন্যই উপযুক্ত। আপনার যদি অন্য একটি সংখ্যা প্রয়োজন হয়, প্রস্থের প্যারামিটারটি 20% থেকে * 100% / সংখ্যা_মোক্ত_কলামগুলি * এ পরিবর্তন করুন।

— অ্যালেক্স ক্লাউস
সূত্র
3
সমস্ত জটিল জটিল সমাধান অনুসরণ করার পরে, আমি দেখতে পেলাম যে এটিই সেরা সমাধান। তবে উল্লম্ব স্ক্রোল বারটির কিছু প্রস্থ রয়েছে (যা সুস্পষ্ট) তবে এর কারণে শিরোনাম এবং সারিগুলির মধ্যে সামান্য অমিল প্রান্তিককরণ রয়েছে। আমার কাছে 7 টি কলাম রয়েছে, সুতরাং আমি উল্লিখিত সূত্রটি গণনা করার পরে প্রস্থকে 14.28% রেখেছি
— চেতান
1
আমি কীভাবে প্রতিটি কলামে একটি নির্দিষ্ট প্রস্থ বরাদ্দ করব?
— ব্যবহারকারী1807271
@ ব্যবহারকারী1807271 আপনি প্রতিটি কলামের প্রস্থ জেএস এর মাধ্যমে নির্ধারণ করতে পারেন, বা আপনার প্রয়োজনীয় প্রস্থের সাথে প্রতি-কলামের ক্লাস তৈরি করুন ("কল 1", "কল 2" এবং তাই) তৈরি করতে পারেন এবং প্রথম কলামে সমস্ত কোষগুলিতে "কল 1" শ্রেণি নির্ধারণ করতে পারেন , "কল 2" কন দ্বিতীয়টি, ইত্যাদি।
— লুক 13
4
আমি আপনাকেও যোগ করার পরামর্শ দিচ্ছি .header-fixed > thead > tr > th{white-space: nowrap;}। শিরোনামগুলি যদি এটিকে
— গুটিয়ে
1
এটিই একমাত্র সমাধান যা আমার পক্ষে কাজ করেছে, আমি এই সমস্যার সাথে পাগল হয়ে যাচ্ছিলাম: ডিআই ম্যাটারিয়াল ব্যবহার করছে এবং এই উত্তরটি আমাকে অনেক সাহায্য করেছে, অতিরিক্তভাবে আমি scrollbar-width: none;নান্দনিক কারণে টোডে যুক্ত করেছি
— অ্যাঞ্জেল
83

এখানে কার্যনির্বাহী সমাধান:

table {
    width: 100%;
}

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

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

thead th {
    height: 30px;

    /*text-align: left;*/
}

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

thead {
    /* fallback */
}


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

<table class="table table-striped">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
    </tbody>
</table>
স্নিপেট প্রসারিত করুন

Jsfiddle লিঙ্ক

— Giulio
সূত্র
31
আইই 9 (এবং সম্ভবত অন্যরা) তে কাজ করে না; নির্দিষ্ট-প্রস্থের কলামগুলির জন্য প্রয়োজন (এবং যদি আপনি স্থির-প্রস্থের কলামগুলি ব্যবহার করতে চলেছেন তবে আরও সহজ, আরও ক্রস ব্রাউজার সমাধান রয়েছে); কন্টেন্টটি নির্দিষ্ট প্রস্থের চেয়ে বেশি হলে খারাপভাবে ব্রেক হয়; আসলে শিরোনাম এবং কলামগুলিকে সীমাবদ্ধ করে না ( উপরের লিঙ্কযুক্ত আপনি দেখতে পাচ্ছেন ; এটি এই সংস্করণে আরও স্পষ্ট হয়েছে যা তাদের একটি সাধারণ সীমানা দেয়) যদিও সম্ভবত এটি সংশোধন করা যেতে পারে; স্ক্রোলবারটি টেবিলের শরীরে পুরোপুরি রেখাযুক্ত নয় ...
— টিজে ক্রোডার
টিডি এবং তমতে একটি দৃশ্যমান সীমানা যুক্ত করুন এবং আপনি দেখতে পাবেন যে টিডিটির প্রস্থটি এর প্রস্থের সাথে মেলে না
— অ্যাপোলো
2
এই সমাধানটির সমস্যাটি হ'ল এটির জন্য একটি নির্দিষ্ট উচ্চতা প্রয়োজন। এটি কাজ করছে না যেখানে প্রতিক্রিয়াশীল নকশা আসে I আমি এমন একটি সমাধান নিয়ে কাজ করছি যা অবস্থান ব্যবহার করে: স্থির, যা স্ক্রোলিংয়ের সমস্যা সমাধান করে, তবে সারি প্রস্থকে বিশৃঙ্খল করে।
— জেফ্রি এ। গোচিন
আপনি টিডি ও প্রস্থের জন্য প্রস্থের% প্রস্থতি বিভক্ত করে ম্যানুয়ালি টিডি প্রস্থের সাথে প্রস্থের প্রস্থের সাথে মেলে না এবং এটি আরও কিছুটা সংকীর্ণ হিসাবে সেট করতে পারেন। আপনি প্রতিবার এটি কাস্টম করবেন তবে এটি এমন কিছু নয় যা প্রায়শই ব্যবহার করা উচিত।
— বেন হফম্যান
আমি দীর্ঘসময় ধরে বিভিন্ন সমাধান সহ খেলতে পেরেছি এবং তারপরে আমি এই প্লাগইনকে হোঁচট খেয়েছি, এটি বুটস্ট্র্যাপ 3 (এবং বুটস্ট্র্যাপ 4) টেবিলগুলির সাথেও কাজ করে। mkoryak.github.io/floatThead/#intro
— ড্র করেছেন
54

আমি গিটহাবের উপর স্টিকি টেবিলহাইডার্স ব্যবহার করছি এবং এটি কবজির মতো কাজ করে!

যদিও শিরোনামটি স্বচ্ছ নয় তবুও আমাকে এই সিএসএস যুক্ত করতে হয়েছিল।

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}
— রোসদী কাসিম
সূত্র
9
মনে রাখবেন যে স্টিকি টেবিলহাইডার্স প্লাগইনটি ব্রাউজারটি প্রাথমিকভাবে এটি লোড করার সময় কেবলমাত্র পৃষ্ঠায় থাকা এইচটিএমএলটি খুঁজে পেতে পারে, এটি গতিশীলভাবে উত্পন্ন সামগ্রী গ্রহণ করতে পারে না
— রব সেডগুইক
3
@ রবসেডগউইক, আমার এটি নেই, তবে এটি এখনও কাজ করা উচিত। যতক্ষণ আপনি স্টিকি টেবিলহাইড্রেস শুরু করবেন তার পরে টেবিলটি উত্পন্ন হবে। এর অর্থ আপনি এটিকে মাথায় শুরু করতে পারবেন না বরং গতিশীলভাবে উত্পন্ন টেবিলটি সম্পূর্ণ হওয়ার পরে ঠিক পরিবর্তে এটিকে আরম্ভ করতে পারবেন।
— রোসদী কাসিম 21
1
চমত্কার সমাধান। অনেক প্রশংসিত. যদি কারও ব্যাকগ্রাউন্ড অস্বচ্ছ করতে সমস্যা হয়, আমাকে ব্যবহার করতে হয়েছিল .tableFloatingHeaderOriginal { //css }।
— ম্যাট ইনামদার
এই প্লাগইন ভাগ করে নেওয়ার জন্য ধন্যবাদ। দুর্দান্ত কাজ!
— blazerunner44
1
একটি বিকল্প গ্রন্থাগার যা 2017 -> github.com/mkoryak/floatThead
— বব জর্ডান
35

এটি একটি ডিভ মধ্যে মোড়ানো প্রয়োজন হবে না ...

সিএসএস :

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

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

বুটপ্লি : http://www.bootply.com/AgI8LpDugl

— বেনার্ড প্যাট্রিক
সূত্র
position: absoluteউপর tbodyসাহায্য করেছে !! ধন্যবাদ !!
— আনিস নায়ার
5
এটি দুর্দান্ত দেখায় যতক্ষণ না আপনি উপলব্ধি করেন যে কলামের ডেটা একই প্রস্থে থাকতে হবে। তা না হলে ডেটা শিরোনামের অধীনে ফিট হয় না।
— Tmac
পৃথক কক্ষগুলি উপচে পড়লে এই সমাধান কাজ করে না।
— জন জাবরোস্কি
1
এটি ক্রোমে কাজ করে না, বুটপ্লি বা সমাধান হয়।
— কেভিঙ্ক
2
কেবল মন্তব্যের জন্য, এটি ক্রোমে আমার জন্য কাজ করে, টেবিলটি পৃষ্ঠার সামগ্রীর মাঝের শীর্ষে রয়েছে .... আপনি আরও তথ্য সরবরাহ করতে পারেন? (আমি লিনাক্সে আছি)
— বেনার্ড প্যাট্রিক
22

এটি CSS সহ আরও সহজ

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }
— এস মের্ট
সূত্র
1
আপনি table-layout:fixedজাভাস্ক্রিপ্ট
— ইউজার 2182349
এটি বুদ্ধিমান দেখায় তবে এটি কি সর্বত্র কাজ করে?
— পেরি
যতদূর আমি জানি, এটি করে।
— এস মের্ট
14

পার্টিতে দেরীতে (আমার জীবনের গল্প), তবে যেহেতু গুগলে এটি প্রথম ফলাফল, এবং উপরের কেউই আমাকে কাজ করতে পারেনি, এখানে আমার কোড

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

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

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

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

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


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}
— ভি
সূত্র
2
এটি আমার পক্ষে কাজ করেছে তবে এখন সমস্ত টিডি একই প্রস্থে রয়েছে। যা আমি চাই না
— শুভমাক্স
সাধারনভাবে সুন্দর. পার্শ্ব নোট: th:nth-child(2), td:nth-child(2)সমতুল্যtr > :nth-child(2)
— ওয়াশিংটন গুয়েডস
1 টেবিলটি খুব ছোট হয়ে গেলে কীভাবে "ক্রেঁকের মতো দেখায়" তা বর্ণনা করার জন্য মন্তব্যটির জন্য আপগেট করুন
— মাইকেল এস মিলার
11

আমার দৃষ্টিতে, jQuery জন্য সেরা প্লাগইনগুলির একটি হ'ল ডেটা টেবিল ।

এটির স্থির শিরোনামের জন্যও একটি এক্সটেনশন রয়েছে এবং এটি খুব সহজেই প্রয়োগ করা হয়।

তাদের সাইট থেকে নেওয়া:

এইচটিএমএল:

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

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

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

javascript:

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

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

কেবলমাত্র একটি স্ক্রোলযোগ্য করার জন্য আপনার কাছে থাকা সহজতমটি <tbody>হ'ল:

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});
— KD2ND
সূত্র
প্রতিশ্রুতিবদ্ধ মনে হচ্ছে। আমি আজকের পরে এটি বাস্তবায়ন করতে যাচ্ছি এবং দেখুন এটি আমার জন্য কীভাবে কাজ করেছিল।
— অ্যান্টনি
ধন্যবাদ, আমি এটি বাস্তবায়ন করেছি এবং এটি বাক্সের বাইরে পুরোপুরি কার্যকর হয়। আমার একটি কার্যক্ষম টেবিলের দরকার ছিল যা একটি মোবাইল ডিভাইস থেকে পরিচালনা করা যেতে পারে এবং এটি ঠিক তাই করে। শিরোনাম লাঠিও।
— ফ্লোরিডা জি।
আমি প্রথম কলাম এবং শিরোনাম উভয়ই স্থির করতে চাই যা ডেটা টেবিলের সামঞ্জস্যতা চার্ট অনুযায়ী সম্ভব নয়
— পাইরেটএপ
আমি বেশ সুন্দর প্রভাব এটি ব্যবহার। কিছু ক্ষেত্রে সামান্য কাঠবিড়ালি মনে হয়েছিল, তবে এটি CSS এর সাথে আমার অনভিজ্ঞতা হতে পারে।
— ডেভিড ব্র্যাডলি
5

সর্বশেষতম পজিশন: 'স্টিকি' হ'ল এখানে সহজ সমাধান

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

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

.outer table th {
        text-align: left;
        top:0;
        position: sticky;
        background-color: white;  
}
 <div class = "outer">
 <table>
             <tr >
              <th>col1</th>
              <th>col2</th>
              <th>col3</th>
              <th>col4</th>
               <th>col5</th>
             <tr>
                       
            <tr >
              <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
               <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
 </table>
 </div>
স্নিপেট প্রসারিত করুন

— voddy
সূত্র
1
সুন্দর এবং দরকারী
— মিগুয়েল অর্টিজ
5 

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

thead th {
    position: sticky;
    top: 0;
}
   <table>
      <thead>
        <tr><th>TH 1</th><th>TH 2</th></tr>
      </thead>
      <tbody>
        <tr><td>A1</td><td>A2</td></tr>
        <tr><td>B1</td><td>B2</td></tr>
        <tr><td>C1</td><td>C2</td></tr>
        <tr><td>D1</td><td>D2</td></tr>
        <tr><td>E1</td><td>E2</td></tr>
        <tr><td>F1</td><td>F2</td></tr>
        <tr><td>G1</td><td>G2</td></tr>
        <tr><td>H1</td><td>H2</td></tr>
        <tr><td>I1</td><td>I2</td></tr>
        <tr><td>J1</td><td>J2</td></tr>
        <tr><td>K1</td><td>K2</td></tr>
        <tr><td>L1</td><td>L2</td></tr>
        <tr><td>M1</td><td>M2</td></tr>
        <tr><td>N1</td><td>N2</td></tr>
        <tr><td>O1</td><td>O2</td></tr>
        <tr><td>P1</td><td>P2</td></tr>
        <tr><td>Q1</td><td>Q2</td></tr>
        <tr><td>R1</td><td>R2</td></tr>
        <tr><td>S1</td><td>S2</td></tr>
        <tr><td>T1</td><td>T2</td></tr>
        <tr><td>U1</td><td>U2</td></tr>
        <tr><td>V1</td><td>V2</td></tr>
        <tr><td>W1</td><td>W2</td></tr>
        <tr><td>X1</td><td>X2</td></tr>
        <tr><td>Y1</td><td>Y2</td></tr>
        <tr><td>Z1</td><td>Z2</td></tr>
      </tbody>
    </table>
স্নিপেট প্রসারিত করুন

আপনার জেএস লাগবে না। [ Vh ] এ টেবিলের উচ্চতা নির্ধারণ করা গুরুত্বপূর্ণ

— TomDom
সূত্র
3

স্টিকিটিবেলেড লাইব্রেরিটি কাজ করতে পেয়ে আমার অনেক সমস্যা হয়েছিল। আরও কিছুটা অনুসন্ধান করার পরে, আমি দেখতে পেলাম যে সাম্প্রতিক আপডেটগুলি এবং আরও ভাল ডকুমেন্টেশন সহ সক্রিয়ভাবে রক্ষণাবেক্ষণ করা বিকল্প ফ্লোটহেড ।

— বব জর্ডান
সূত্র
2

আপনার "প্রদর্শন: ব্লক" দিয়ে চেষ্টা করা উচিত; কারো কাছে, কারণ এখন এটি ইনলাইন-ব্লক এবং উচ্চতা নির্ধারণ করার জন্য, উপাদানটি "ব্লক" হওয়া উচিত

— ওয়াল্টার মাইয়ার
সূত্র
প্রদর্শন: ব্লকটি প্রয়োজনীয় ছিল তবে তারপরে আমাকে ভাসা: বাম এবং সমস্ত ঘরের জন্য একটি যথাযথ প্রস্থও রাখতে হয়েছিল। আমার পোস্ট করা সমাধানটি এখন কাজ করছে।
— giulio
2

প্রথমে বুটস্ট্র্যাপ টেবিলের জন্য কিছু মার্কআপ যুক্ত করুন। এখানে আমি একটি স্ট্রিপড টেবিল তৈরি করেছি তবে একটি কাস্টম টেবিল শ্রেণিও যুক্ত করেছি .table-scrollযা টেবিলটিতে উল্লম্ব স্ক্রোল বার যুক্ত করে এবং টেবিল শিরোনামটি নীচে স্ক্রোল করার সময় স্থির করে দেয়।

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

CSS

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

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

.table-scroll thead > tr > th {
    border: none;
}
— core114
সূত্র
2

আমি ফ্লোটহেড jQuery প্লাগইন ব্যবহার করেছি ( https://mkoryak.github.io/floatThead/#intro )

ডক্স বলছে এটি বুটস্ট্র্যাপ 3 টি টেবিলের সাথে কাজ করে এবং আমি বলতে পারি এটি বুটস্ট্র্যাপ 4 টি টেবিলের সাথে টেবিল-প্রতিক্রিয়াশীল সহায়ক ছাড়াও ব্যবহার করে।

প্লাগইন ব্যবহার করা এটির মতো সহজ:

এইচটিএমএল (ভ্যানিলা বুটস্ট্র্যাপ টেবিল মার্কআপ)

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

প্লাগইন সূচনা:

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

সম্পূর্ণ অস্বীকৃতি: আমি কোনওভাবেই প্লাগইনটির সাথে যুক্ত নই। আমি এখানে এবং অন্য কোথাও পোস্ট প্রচুর অন্যান্য সমাধানের চেষ্টা করার কয়েক ঘন্টা পরে এটি খুঁজে পেয়েছি।

— ড্রিউ
সূত্র
1
এটি একটি দুর্দান্ত প্লাগইন! সম্পূর্ণ অস্বীকৃতি: আমি এটি লিখেছি।
— mkoryak
1

এটি এখনই মূল্যবান যাহার জন্য: আমি এইচটিএমএল এবং সিএসএস সহ একটি বোন থ্রেড টেবিল স্ক্রোলের একটি সমাধান পোস্ট করেছি

  • দুটি টেবিল লাগে (একমাত্র শিরোলেখের জন্য একটি, সবার জন্য একটি - ব্রাউজার দ্বারা সাজানো)
  • বিন্যাসের পরে, উপরের (কেবলমাত্র শিরোলেখের) টেবিলটি নিম্নের প্রস্থে সামঞ্জস্য করুন
  • নীচের টেবিলের শিরোনামটি লুকান ( visibilityনা, display) এবং নিম্ন টেবিলটি স্ক্রোলযোগ্য ডাব্লু / একটি ডিভিতে করুন make

সমাধানটি ব্যবহৃত যে কোনও স্টাইল / ফ্রেমওয়ার্কগুলিতে অজ্ঞেয়বাদী - তাই সম্ভবত এটি এখানেও কার্যকর ...

একটি দীর্ঘ বিবরণটি এইচটিএমএল এবং সিএসএস সহ সারণী স্ক্রোলে রয়েছে / কোডটি এই কলমেও রয়েছে: https://codepen.io/sebredhh/pen/QmJvKy

— সেবাস্তিয়ান রথবুচার
সূত্র
1

পূর্ণ উচ্চতা সারণীগুলির জন্য (পৃষ্ঠা স্ক্রোলগুলি, টেবিলটি নয়)

দ্রষ্টব্য: আমি পুরো <thead>...</thead>কারণটি সরিয়ে নিয়েছি আমার ক্ষেত্রে আমার দুটি সারি ছিল (শিরোনাম এবং ফিল্টারগুলি)

জেএস (jQuery) সহ

$( function() {

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

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

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

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

সিএসএস (কেবল স্টাইলিংয়ের জন্য)

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

thead.floating-header>tr:last-child>th {
       border-bottom: 1px solid #aaa;
}
— antman3351
সূত্র
1

এখন যেহেতু "সমস্ত" ব্রাউজারগুলি ES6 সমর্থন করে, আমি উপরের বিভিন্ন পরামর্শগুলিকে একটি জাভাস্ক্রিপ্ট শ্রেণিতে অন্তর্ভুক্ত করেছি যা একটি টেবিলটিকে তর্ক হিসাবে গ্রহণ করে এবং শরীরকে স্ক্রোলযোগ্য করে তোলে। এটি ব্রাউজারের লেআউট ইঞ্জিনটিকে শিরোনাম এবং দেহের ঘরের প্রস্থগুলি নির্ধারণ করতে দেয় এবং তারপরে কলামের প্রস্থকে একে অপরের সাথে মেলে।

একটি টেবিলের উচ্চতা সুস্পষ্টভাবে সেট করা যেতে পারে, বা ব্রাউজার উইন্ডোর অবশিষ্ট অংশটি পূরণ করতে তৈরি করা যেতে পারে এবং ভিউপোর্ট রাইজাইজিং এবং / অথবা এর মতো ইভেন্টগুলির জন্য কলব্যাক সরবরাহ করে details উপাদানগুলি খোলার বা বন্ধ করার ।

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

কোডটি কোনও লাইব্রেরির উপর নির্ভর করে না, তবে যদি তারা ব্যবহার করা হয় তবে তাদের সাথে দুর্দান্তভাবে খেলবে। (JQuery ব্যবহার করা পৃষ্ঠাগুলিতে পরীক্ষিত)।

কোড এবং নমুনা ব্যবহার গিথুবে উপলভ্য ।

— ক্রিস্টোফার ভিকারি
সূত্র
0

আপনি দুটি ডিভ রাখতে পারেন যেখানে ১ ম ডিভ (শিরোলেখ) এর স্বচ্ছ স্ক্রোল বার থাকবে এবং ২ য় ডিভের সাথে দৃশ্যমান / অটো স্ক্রোল বার সহ ডেটা থাকবে। নমুনায় ডেটা লুপ করার জন্য কৌনিক কোড স্নিপেট রয়েছে।

নীচে কোড আমার জন্য কাজ করেছে -

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

শিরোনাম স্ক্রোল বারটি লুকানোর জন্য অতিরিক্ত শৈলী -

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

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

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

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

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

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

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

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

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

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>
— প্রীতেক রাই
সূত্র
0

স্ক্রোলযোগ্য সারি এবং কলামগুলির সাহায্যে স্থির টেবিল শিরোনাম কীভাবে তৈরি করা যায় তা সম্পর্কে আমার কপেন কলম। কলামগুলিও প্রস্থ স্থির করা হয়েছে, http://codepen.io/abhilashn/pen/GraJyp

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

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

.cust-table-cont { width:100%; overflow-x:auto; } 
.cust-table-cont .table-responsive { width:1190px;  }
.cust-table { table-layout:fixed;  } 
.cust-table thead, .cust-table tbody { 
display: block;
}
.cust-table tbody { max-height:620px; overflow-y:auto; }
স্নিপেট প্রসারিত করুন

— অভিলাষ নারায়ণ
সূত্র
0

ক্লিনার সলিউশন (কেবলমাত্র সিএসএস)

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


<table class="table table-striped table-fixed">
    <thead>
        <tr align="center">
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
        </tr>
        <tr>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
        </tr>
    </tbody
</table
— user3468235
সূত্র
0

একক উইন্ডোতে একাধিক স্ক্রোলযোগ্য টেবিল সমর্থন।

খাঁটি সিএসএস এবং কোনও স্থির বা স্টিকি নেই।

আমি বছরের পর বছর ধরে অটো "টিডি" এবং "ম" প্রস্থের সাথে স্থির সারণী শিরোনামটি অনুসন্ধান করছি। অবশেষে আমি কিছু কোড করেছিলাম, এটি আমার পক্ষে ভাল কাজ করেছে তবে আমি নিশ্চিত নই যে এটি সবার পক্ষে ভাল কাজ করে।

সমস্যা 1: আমরা টেবিল বা টোডি উচ্চতা সেট করতে পারি না যখন এটির প্রচুর পরিমাণে "টিআর" থাকে এটি ডিফল্ট টেবিলের বৈশিষ্ট্যের কারণে।

সমাধান: একটি প্রদর্শন সম্পত্তি সারণী সেট করুন।

সমস্যা 2: যখন আমরা একটি প্রদর্শন বৈশিষ্ট্য সেট করি, "td" উপাদানের প্রস্থটি "ম" উপাদানের সমান প্রস্থ হতে পারে না। এবং পূর্ণ প্রস্থ সারণীতে 100% এর মতো উপাদানগুলি সঠিকভাবে পূরণ করা শক্ত hard

সমাধান: সিএসএস "ফ্লেক্স" প্রস্থ এবং পূরণ সেট-আপগুলির জন্য খুব ভাল সমাধান, তাই আমরা সিএসএস "ফ্লেক্স" দিয়ে আমাদের টডি এবং থ্যাড উপাদানগুলি তৈরি করব।

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

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

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

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

.ea_table tr {
  display: flex;
}


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

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

    </tbody>

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

jsfiddle

— এরসেল আক্তাস
সূত্র
-1

এই লিঙ্কটি ব্যবহার করেছেন stackoverflow.com/a/17380697/1725764, হাশেম কুলামির মূল পোস্টের মন্তব্যে এবং ব্যবহৃত ডিসপ্লেতে: ফ্লোটের পরিবর্তে ইনলাইন-ব্লক। টেবিলে 'টেবিল-বর্ডার' শ্রেণিও রয়েছে কিনা সীমাবদ্ধ করে।

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

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

তারপরে শুধু টিডি এবং মাপের প্রস্থগুলি যুক্ত করুন

table.table-prep {
  tr > td.type,
  tr > th.type{
    width: 10%;
  }
  tr > td.name,
  tr > th.name,
  tr > td.notes,
  tr > th.notes,
  tr > td.quantity,
  tr > th.quantity{
    width: 30%;
  }
}
— juppee
সূত্র
-1

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

— Dzintars
সূত্র
-1

এইচটিএমএল

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

</head>
<body>

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

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


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

সিএসএস

thead,tbody,tr,td,th{
    display:block;
}
tbody{
    height:200px;
    overflow-y:auto;
    width: 100%;
}
thead > tr > th, tbody > tr > td{
    float:left;
}
— নীতেশ ভুপালা
সূত্র
-1

নির্দিষ্ট প্রস্থ ছাড়াই একটি সহজ উপায়:

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

উৎস

এখন, onLoad এ, তম প্রস্থকে সামঞ্জস্য করতে, এই jquery স্ক্রিপ্টটি যুক্ত করুন:

$.each($('.myTable tbody tr:nth(0) td'), function(k,v) {
    $('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
});
— mauretto
সূত্র
-2

স্ক্রোলযোগ্য টেবিলটি উল্লম্বভাবে তৈরি করতে এইভাবে ডিভের ভিতরে টেবিলটি রাখুন। পরিবর্তন overflow-yকরার জন্য overflow-xটেবিল স্ক্রোলযোগ্য অনুভূমিকভাবে করা। কেবল overflowটেবিলকে উভয় অনুভূমিক এবং উল্লম্বভাবে স্ক্রোলযোগ্য করতে।

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>
— ইকবাল প্রটোমো সান্টোসো
সূত্র
-2 

table {

    display: block;
}

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

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

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

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


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



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

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