ওভারফ্লো স্ক্রোল দিয়ে টবি উচ্চতা কীভাবে সেট করবেন

113

উচ্চতা প্রস্থের ওভারফ্লো স্ক্রোলটি সেট করার সময় আমি সমস্যার মুখোমুখি। 

<style> 
     tbody{
       height:50px;display:block;overflow:scroll
     }
   </style>

       <h3>Table B</h3>
    <table style="border: 1px solid red;width:300px;display:block">
        <thead>
            <tr>
                <td>Name</td>
                <td>phone</td>
            </tr>
        </thead>
        <tbody style='height:50px;display:block;overflow:scroll'>
            <tr>
                <td>AAAA</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>BBBBB</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>CCCCC</td>
                <td>3435656</td>
            </tr>
        </tbody>
    </table>

আমার ফিডল এখানে যান

আমি ওভারফ্লো স্ক্রোল সহ টেবিল বি এর মতো টেবিল বি চাই।

যে কোন ধরণের সাহায্য গ্রহন করা হবে.

অনেক ধন্যবাদ, এম।

html  css 
— বাউণ্ডুলে
সূত্র
বুঝতে পারি না। আপনি ওভারফ্লো স্ক্রোল সহ টেবিল বি চাইবেন টেবিল এ এর ​​মতো তবে টেবিল এ ওভারফ্লো হয়নি, টেবিল বি রয়েছে।
— অ্যালেক্স চর
আলেক: আমি যখন ওভারফ্লো স্ক্রোল এবং ডিসপ্লে ব্লক দিয়ে টিডির উচ্চতা সেট করি তখন ডিজাইনটি মেসেজ হয়।
— ম্যাভেরিক
সারিবদ্ধতা টেবিল এ এর ​​মতো হওয়া উচিত?
— ম্যাভেরিক

উত্তর:

223

যদি আপনি tbodyকোনও স্ক্রোল দেখাতে চান তবে এটিকে একটিতে রূপান্তর করুন block।

আচরণকে রাখার জন্য table, ঘুরে trমধ্যে table।

একইভাবে কোষগুলি স্প্রে করতে, ব্যবহার করুন table-layout:fixed;

ডেমো টডি স্ক্রোল

আপনার এইচটিএমএল পরীক্ষার জন্য সিএসএস:

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

তাহলে tbody, একটি স্ক্রোল প্রদর্শন করা হয় না কারণ বিষয়বস্তু চেয়ে কম হয় heightবা max-height, সঙ্গে স্ক্রল যে কোনো সময় নির্ধারণ করে: overflow-y:scroll;। ডেমো 2

— জি-Cyrillus
সূত্র
1
জিসিরিলাস: আপনি সবচেয়ে কাছের। তবে একটি বিষয় আছে। টেবিল প্রস্থ খুব বেশি গেছে। আমরা কি টেবিলের প্রস্থ ঠিক করতে পারি?
— ম্যাভেরিক
1
দুঃখিত, আমার উদাহরণ নেই। যদি আমরা আপনার প্রদত্ত কোডটির বিষয়ে কথা বলি তবে এটির উপরের কোডের সংজ্ঞা দেওয়া প্রস্থটি গ্রহণ না করা: টেবিল {প্রস্থ: 400px; }
— ম্যাভেরিক
1
অনেক ধন্যবাদ @ জিসিরিলাস এটি দুর্দান্ত কাজ করে! আমি কি একটি পরামর্শ দিতে পারি? প্রতিস্থাপন overflow:autoদ্বারা overflow-y: scroll1em এমনকি যখন শরীর স্ক্রলবার দরকার নেই বাম থাকুন এড়াতে হেডার করতে।
— বুল্ডওয়ার্ফ
3
অবশেষে! আমি এখন একটি স্থির উচ্চতা, স্ক্রোলিং টেবিল বডি, ফিক্সড শিরোনাম, সামঞ্জস্যযোগ্য কলাম প্রস্থ .... সমস্ত জাভাস্ক্রিপ্ট ছাড়াই রাখতে সক্ষম! ধন্যবাদ!!
— ম্যাট হ্যানকক
4
সতর্কতা: এই সমাধানটি থ্যাড এবং টডি সেল গ্রিডগুলি সংযোগ বিচ্ছিন্ন করে; যার অর্থ যে বেশিরভাগ ব্যবহারিক ক্ষেত্রে, আপনি টেবিলগুলি থেকে প্রত্যাশিত সেল প্রান্তিককরণটি পাবেন না। নোট করুন এই সমাধানটি তাদের সাজানোর বাছাই করতে একটি হ্যাক ব্যবহার করেছে: থাড {প্রস্থ: ক্যালক (100% - 1 মিমি)}
— সিবাবারস
53

টেবিলের বডি থেকে স্ক্রোল বারটি ব্যবহার করার এটি সহজ উপায়

/* It is simple way to use scroll bar to table body*/

table.tableBodyScroll tbody {
  display: block;
  max-height: 300px;
  overflow-y: scroll;
}

table.tableBodyScroll thead, table.tableBodyScroll tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
<table class="tableBodyScroll">
  <thead>
    <th>Invoice Number</th>
    <th>Purchaser</th>
    <th>Invoice Amount</th>
    <th>Invoice Date</th>
  </thead>
  <tbody>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
  </tbody>
</table>
স্নিপেট প্রসারিত করুন

— দীনেশ ভাইটেজ
সূত্র
21
নিখুঁত থেকে দূরে, সমস্ত কলামকে একই প্রস্থ হতে বাধ্য করে
— স্ট্যাকাররা
শরীরের উচ্চতা নির্ধারণ না করে এটি করার কোনও উপায় আছে কি?
— shinzou
1
আমি এটিতে কাজ করব ... তবে আমরা যদি উচ্চতা ব্যবহার না করি, সুতরাং সমস্ত রেকর্ডগুলি এমন সময়ে প্রদর্শিত হবে যেখানে কোনও উল্লম্ব স্ক্রোল বার থাকবে না। ধন্যবাদ @ শিনজৌ
— দীনেশ ভাইটেজ
@stackers আপনাকে জুড়তে দ্বারা কলাম প্রস্থ সেট করতে পারেন width: 100pxথেকে td, thভিতরেtbody, thead
— দেরিউজ Sikorski
আমি এই পদ্ধতিতে একটি সমস্যার মুখোমুখি। যখন আমি ডিসপ্লে রাখি: টেবিলটি গোলমাল হয়ে যাওয়ার জন্য ব্লক করুন। তবে আমি ডিসপ্লে: ব্লক না রেখে স্ক্রোল ভিউটি পেতে পারি না। এর কোন সমাধান ??
— আহমদ সাফনাজ
27

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

এই পদ্ধতির সুবিধাটি হ'ল আপনাকে টিডির উপর প্রদর্শনটি পরিবর্তন করতে হবে না এবং হেডারের সেল প্রস্থকে ডেটা সেল কলামের প্রস্থের সাথে সামঞ্জস্য রেখে আপনি কলামের প্রস্থ গণনা করতে ব্রাউজারে রেখে যেতে পারেন।

/* Set a fixed scrollable wrapper */
.tableWrap {
  height: 200px;
  border: 2px solid black;
  overflow: auto;
}
/* Set header to stick to the top of the container. */
thead tr th {
  position: sticky;
  top: 0;
}

/* If we use border,
we must use table-collapse to avoid
a slight movement of the header row */
table {
 border-collapse: collapse;
}

/* Because we must set sticky on th,
 we have to apply background styles here
 rather than on thead */
th {
  padding: 16px;
  padding-left: 15px;
  border-left: 1px dotted rgba(200, 209, 224, 0.6);
  border-bottom: 1px solid #e8e8e8;
  background: #ffc491;
  text-align: left;
  /* With border-collapse, we must use box-shadow or psuedo elements
  for the header borders */
  box-shadow: 0px 0px 0 2px #e8e8e8;
}

/* Basic Demo styling */
table {
  width: 100%;
  font-family: sans-serif;
}
table td {
  padding: 16px;
}
tbody tr {
  border-bottom: 2px solid #e8e8e8;
}
thead {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
tbody tr:hover {
  background: #e6f7ff;
}
<div class="tableWrap">
  <table>
    <thead>
      <tr>
        <th><span>Month</span></th>
        <th>
          <span>Event</span>
        </th>
        <th><span>Action</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>February. An extra long string.</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>March</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>April</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>May</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>June</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>July</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>August</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>September</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>October</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>November</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>December</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
    </tbody>
  </table>
</div>
স্নিপেট প্রসারিত করুন

— brandonkal
সূত্র
8
ভালো বুদ্ধি! এটি অন্যান্য বিকল্পগুলির মতো টেবিলের বিন্যাসকে বিশৃঙ্খলা করে না।
— আন্দ্রে
2
যে কোনও পূর্বপুরুষের উপাদানগুলি ওভারফ্লো ব্যবহার করছে না তা নিশ্চিত করার জন্য আপনাকে অন্য যে কাউকে স্মরণ করিয়ে দিতে হবে। চটচটে না কাজ: অবস্থান সৃষ্টি করতে পারে stackoverflow.com/questions/43707076/...
— cboston
এই সমাধানের আর একটি দুর্দান্ত দিকটি এটির সাথে কাজ করেheight: 100%
— পিয়ের-লুক জেনড্রেউ
1
IE অবস্থানটি সমর্থন করে না: স্টিকি
— ariel_556
1
FWIW আপনি tfoot0 এর একটি স্টিকি নীচে অবস্থান সহ একটি যোগ করতে পারেন এবং এটি একটি কবজির মতো কাজ করে। দুর্দান্ত উত্তর!
— ম্যাটি জে
11

ডিফল্টরূপে overflowটেবিল গ্রুপ উপাদান প্রযোজ্য নয় যদি না আপনি একটি দিতে display:blockকরার <tbody> এছাড়াও আপনি দিতে একটি আছে position:relativeএবং display: blockকরতে <thead>। ডেমো পরীক্ষা করে দেখুন ।

.fixed {
  width:350px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 200px;
}


.fixed thead {
  background-color: red;
  color: #fdfdfd;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
  overflow-y: scroll;
    overflow-x: hidden;
}
— খিমা পান্ডে
সূত্র
1
শরীরের উচ্চতা নির্ধারণ না করে এটি করার কোনও উপায় আছে কি?
— shinzou
2
পুরোপুরি কাজ করে না। যদি কলামের নামটি কলামের বিষয়বস্তু থেকে বৃহত্তর হয় তবে এটি এটিকে বিভ্রান্ত করে।
— ক্রিশ্চিয়ানো মিয়া
6

সকল সমাধানগুলির মধ্যে সহজতম:

সিএসএসে নীচের কোডটি যুক্ত করুন:

.tableClassName tbody {
  display: block;
  max-height: 200px;
  overflow-y: scroll;
}

.tableClassName thead, .tableClassName tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.tableClassName thead {
  width: calc( 100% - 1.1em );
}

১.১ এএম হ'ল স্ক্রোল বারের গড় প্রশস্ততা, প্রয়োজন হলে দয়া করে এটি পরিবর্তন করুন।

— গিল বাগজিও
সূত্র
1
২ য় নিয়মের বাক্য গঠনটি ভুল, কারণ এটি tbody trপৃষ্ঠায় সমস্ত উপাদান নির্বাচন করে। এ পরিবর্তন করুন:.tableClassName thead, .tableClassName tbody tr {...}
— অ্যারন হুডন
2

নীচের মত আপনার দ্বিতীয় টেবিল কোড পরিবর্তন করুন।

<table style="border: 1px solid red;width:300px;display:block;">
<thead>
    <tr>
        <td width=150>Name</td>
        <td width=150>phone</td>
    </tr>
</thead>
<tbody style='height:50px;overflow:auto;display:block;width:317px;'>
    <tr>
        <td width=150>AAAA</td>
        <td width=150>323232</td>
    </tr>
    <tr>
        <td>BBBBB</td>
        <td>323232</td>
    </tr>
    <tr>
        <td>CCCCC</td>
        <td>3435656</td>
    </tr>
</tbody>
</table>

জেএসফিডল ডেমো

— সুরেশ পন্নুকালাই
সূত্র
শরীরের উচ্চতা নির্ধারণ না করে এটি করার কোনও উপায় আছে কি?
— shinzou
2

আমার ক্ষেত্রে আমি অন্যান্য উত্তরগুলি যেমন দেখায় তত পিক্সেলগুলিতে স্থির উচ্চতার পরিবর্তে প্রতিক্রিয়াশীল টেবিলের উচ্চতা রাখতে চেয়েছিলাম। এটি করতে আমি টেবিলযুক্ত ডিভের উপর দৃশ্যমান উচ্চতার সম্পত্তি এবং উপচে পড়া শতাংশ ব্যবহার করেছি:

&__table-container {
  height: 70vh;
  overflow: scroll;
}

এইভাবে উইন্ডোটি পুনরায় আকার দেওয়ার সাথে সাথে টেবিলটি প্রসারিত হবে।

— kazuar
সূত্র
1

এই উত্তরের ভিত্তিতে , আপনি যদি ইতিমধ্যে বুটস্ট্র্যাপ ব্যবহার করেন তবে এখানে একটি ন্যূনতম সমাধান:

div.scrollable-table-wrapper {
  height: 500px;
  overflow: auto;

  thead tr th {
    position: sticky;
    top: 0;
  }
}
<div class="scrollable-table-wrapper">
  <table class="table">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

বুটস্ট্র্যাপ v3 এ পরীক্ষিত

— ErJab
সূত্র
0

আমি অনুমান করি আপনি যা করতে চেষ্টা করছেন তা হ্যাডারটি স্থির রাখা এবং শরীরের সামগ্রীকে স্ক্রোল করা। আপনি সামগ্রীটি 2 টি দিকে স্ক্রোল করতে পারেন:

  • অনুভূমিকভাবে: আপনি কোনও স্লাইডার (উদাহরণস্বরূপ একটি jQuery স্লাইডার) ব্যবহার না করলে আপনি অনুভূমিকভাবে সামগ্রীতে স্ক্রোল করতে পারবেন না। আমি এই ক্ষেত্রে কোনও টেবিল ব্যবহার এড়াতে পরামর্শ দেব would
  • উল্লম্বভাবে: আপনি কোনও tbodyট্যাগ দিয়ে তা অর্জন করতে সক্ষম হবেন না কারণ নির্ধারিতকরণ display:blockবা display:inline-blockসারণির বিন্যাসটি ভেঙে দেবে।

এখানে একটি সমাধান ব্যবহার করে divs: জেএসফিডাল

এইচটিএমএল:

<div class="wrap_header">
    <div class="column">
        Name
    </div>
    <div class="column">
        Phone
    </div>
    <div class="clearfix"></div>
</div>
<div class="wrap_body">
    <div class="sliding_wrapper">
        <div class="serie">
            <div class="cell">
                AAAAAA
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                BBBBBB
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                CCCCCC
            </div>
            <div class="cell">
                3435656
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

সিএসএস:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {display:inline-table;}

/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
    /* Hides from IE-mac \*/
    * html .clearfix {height:1%;}
    .clearfix {display:block;}
    /* End hide from IE-mac */

ব্যাখ্যা:

আপনার এমন একটি রয়েছে sliding wrapperযা সমস্ত ডেটা ধারণ করবে।

নিম্নলিখিত নোট:

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}

17px এর পার্থক্য রয়েছে কারণ আমাদের স্ক্রোলবারের প্রশস্ততা বিবেচনার প্রয়োজন।

— উইসাম এল-কিক
সূত্র
0

ওয়েবকিটটি ট্যাগটির display: table-row-groupজন্য অভ্যন্তরীণভাবে ব্যবহার করছে বলে মনে হচ্ছে tbody। এটিতে উচ্চতা নির্ধারণের সাথে বর্তমানে একটি বাগ রয়েছে: https://github.com/w3c/csswg-drafts/issues/476

আশা করি শিগগিরই এর সমাধান হয়ে যাবে।

— কার্ল অ্যাডলার
সূত্র
0

এইচটিএমএল:

<table id="uniquetable">
    <thead>
      <tr>
        <th> {{ field[0].key }} </th>
        <th> {{ field[1].key }} </th>
        <th> {{ field[2].key }} </th>
        <th> {{ field[3].key }} </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="obj in objects" v-bind:key="obj.id">
        <td> {{ obj.id }} </td>
        <td> {{ obj.name }} </td>
        <td> {{ obj.age }} </td>
        <td> {{ obj.gender }} </td>
      </tr>
    </tbody>
</table>

সিএসএস:

#uniquetable thead{
    display:block;
    width: 100%;
}
#uniquetable tbody{
    display:block;
    width: 100%;
    height: 100px;
    overflow-y:overlay;
    overflow-x:hidden;
}
#uniquetable tbody tr,#uniquetable thead tr{
    width: 100%;
    display:table;
}
#uniquetable tbody tr td, #uniquetable thead tr th{
   display:table-cell;
   width:20% !important;
   overflow:hidden;
}

এটি পাশাপাশি কাজ করবে:

#uniquetable tbody {
    width:inherit !important;
    display:block;
    max-height: 400px;
    overflow-y:overlay;
  }
  #uniquetable thead {
    width:inherit !important;
    display:block;
  }
  #uniquetable tbody tr, #uniquetable thead tr {
    display:inline-flex;
    width:100%;
  }
  #uniquetable tbody tr td,  #uniquetable thead tr th {
    display:block;
    width:20%;
    border-top:none;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height:400px;
  }
— বার্মজ কাস্ট্রাল
সূত্র
0

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

.go-wrapper {
    overflow-x: auto;
    width: 100%;
}
.go-wrapper table {
    width: auto;
}
.go-wrapper table tbody {
    display: block;
    height: 220px;
    overflow: auto;
}
.go-wrapper table thead {
    display: table;
}
.go-wrapper table tfoot {
    display: table;
}
.go-wrapper table thead tr, 
.go-wrapper table tbody tr,
.go-wrapper table tfoot tr {
    display: table-row;
}

.go-wrapper table th,
.go-wrapper table td { 
    white-space: nowrap; 
}

.go-wrapper .aw-50  { min-height: 1px; width: 50px; }
.go-wrapper .aw-100 { min-height: 1px; width: 100px; }
.go-wrapper .aw-200 { min-height: 1px; width: 200px; }
.go-wrapper .aw-400 { min-height: 1px; width: 400px; }

/***** Colors *****/
.go-wrapper table {
    border: 2px solid red
}
.go-wrapper table thead, 
.go-wrapper table tbody, 
.go-wrapper table tfoot {
    outline: 1px solid green
}
.go-wrapper td {
    outline: 1px solid blue
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Template</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="container">
        <div class="row mt-5 justify-content-md-center">
            <div class="col-8">
                <div class="go-wrapper">
                    <table class="table">
                        <thead>
                            <tr>
                                <th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>
                                <th><div class="aw-200">Name</div></th>
                                <th><div class="aw-50" >Week</div></th>
                                <th><div class="aw-100">Date</div></th>
                                <th><div class="aw-100">Time</div></th>
                                <th><div class="aw-200">Project</div></th>
                                <th><div class="aw-400">Text</div></th>
                                <th><div class="aw-200">Activity</div></th>
                                <th><div class="aw-50" >Hours</th>
                                <th><div class="aw-50" >Pause</div></th>
                                <th><div class="aw-100">Status</div></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><div class="aw-50"><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></td>
                                <td><div class="aw-200">AAAAA</div></td>
                                <td><div class="aw-50" >15</div></td>
                                <td><div class="aw-100">07.04.2020</div></td>
                                <td><div class="aw-100">10:00</div></td>
                                <td><div class="aw-200">Project 1</div></td>
                                <td><div class="aw-400">Blah blah blah</div></td>
                                <td><div class="aw-200">Activity</div></td>
                                <td><div class="aw-50" >2t</div></td>
                                <td><div class="aw-50" >30min</div></td>
                                <td><div class="aw-100">Waiting</div></td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>BBBBB</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>CCCCC</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah Blah blah blah</td>
                                <td>Activity Activity Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>DDDDD</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>EEEEE</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>FFFFF</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity Activity Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>GGGGG</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>HHHHH</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>IIIII</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>JJJJJ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>KKKKK</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>LLLLL</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>MMMMM</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>NNNNN</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>OOOOO</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>PPPPP</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>QQQQQ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>RRRRR</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>SSSSS</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>TTTTT</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>UUUUU</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>VVVVV</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>XXXXX</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>YYYYY</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ZZZZZ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ÆÆÆÆÆ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ØØØØØ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ÅÅÅÅÅ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>
                                <th><div class="aw-200">Name</div></th>
                                <th><div class="aw-50" >Week</div></th>
                                <th><div class="aw-100">Date</div></th>
                                <th><div class="aw-100">Time</div></th>
                                <th><div class="aw-200">Project</div></th>
                                <th><div class="aw-400">Text</div></th>
                                <th><div class="aw-200">Activity</div></th>
                                <th><div class="aw-50" >Hours</th>
                                <th><div class="aw-50" >Pause</div></th>
                                <th><div class="aw-100">Status</div></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
   
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

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

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