টুইটার বুটস্ট্র্যাপ স্ক্রোলযোগ্য টেবিল

Question

আমি আমার ওয়েবসাইটে একটি টেবিল রাখতে চাই সমস্যাটি হচ্ছে এই টেবিলটিতে প্রায় 400 টি লাইন থাকবে। আমি কীভাবে টেবিলের উচ্চতা সীমাবদ্ধ করতে এবং এতে স্ক্রোলবার প্রয়োগ করতে পারি? এটি আমার কোড:

<div class="span3">
  <h2>Achievements left</h2>
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

  <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

আমি সারণিতে সর্বোচ্চ-উচ্চতা এবং নির্দিষ্ট উচ্চতা প্রয়োগ করার চেষ্টা করেছি, তবে এটি কার্যকর হয় না।

Answer 1

সারণী উপাদানগুলি সরাসরি এটি সমর্থন করে বলে মনে হয় না। টেবিলটি একটি ডিভের মধ্যে রাখুন এবং ডিভের উচ্চতা নির্ধারণ করুন এবং সেট করুন overflow: auto।

Comments

এটি কি আসলে কাজ করেছিল? আমি এটি চেষ্টা করেছিলাম এবং এর কোনও প্রভাব ছিল না।

— সিজেস্টেহনো

ওভারফ্লো: স্ক্রোলের পরিবর্তে ওভারফ্লোটি 'অটো' তে সেট করে কেবল FYI, রিডানড্যান্ট অনুভূমিক স্ক্রোল বার তৈরি করবে না।

— daCoda

@ জোনাথনউড: overflowকেবলমাত্র টেবিলের শরীরে প্রয়োগ করার কোনও উপায় আছে তবে যেখানে <thead>অংশগুলি সর্বদা প্রদর্শিত হয়?

— উইলেম ভ্যান অনসেম

এটি কেবল মানুষের জন্য পরিষ্কার করার জন্য .... <ডি স্টাইল = "ওভারফ্লো: অটো;"> <টেবিল শ্রেণি = "টেবিল"> .... </table> </div>

— হেনরি ওয়েবার

একটি ছোট উদাহরণ দিন!

— ইয়াহিয়া ইয়াহইউইইউ

Answer 2

.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

আপনি এটিকে নিজের ডিভের মধ্যে আবদ্ধ করতে চান বা স্প্যানটিকে তার নিজস্ব একটি আইডি দিতে চাইবেন যাতে আপনি আপনার পুরো লেআউটটিকে প্রভাবিত করবেন না।

এখানে একটি বেহালতা: http://jsfiddle.net/zm6rf/

Comments

মনে রাখবেন যে '! গুরুত্বপূর্ণ' গুরুত্বপূর্ণ নয়;)

— চির্ডস

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

— টেরি

প্যারেন্ট কন্টেইনারটির পিক্সেল উচ্চতা থাকলে আপনি কেবল উচ্চতা শতাংশ যুক্ত করতে পারেন। আপনার ক্ষেত্রে, আপনার .ro 500px এবং .span3 থেকে 50% এর মতো কিছু করতে হবে। যদি পিতামাতাদের একটি উচ্চতা নির্ধারিত না থাকে তবে আপনি যদি শতাংশ দেন তবে ব্রাউজারটি কেবলমাত্র সামগ্রীর উচ্চতায় ডিফল্ট হয়।

— চির্ডস

আপনি কি টডিটিকে স্ক্র্যাবল করতে এবং থিয়েডকে না করার সময় এটি করতে পারেন?

— রাস্তার আলো

আপনার তথ্যের জন্য, ওভারফ্লো সেট করা: স্ক্রোল একটি অনুভূমিক স্ক্রোল বার তৈরি করবে যা অনর্থক হতে পারে। এটি স্বয়ংক্রিয়ভাবে তৈরি করা, অর্থাত্ ওভারফ্লো: অটো, এটি করে না।

— দাকোদা

Answer 3

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

সিএসএস :

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

Comments

আমি এই উদাহরণটি দেখে আমি খুব উত্তেজিত হয়েছি কিন্তু যখন tdউপাদানটির ডেটা আকারের আকারে পৃথক হয় তখন লেআউটটি "মজাদার" হয়ে যায় । bootply.com/OsvzINuTUA

— ফ্রিটো

@ ফ্রিটো চিন্তা করবেন না, খুশি হোন;) আমি কেবল টেবিল-লেআউটটি ভুলে গেছি: স্থির; ... লিঙ্ক আপডেট হয়েছে

— বেনার্ড প্যাট্রিক

Answer 4

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

আমার সমাধানে শিরোনাম এবং পাদলেখ স্থির থাকে যখন শরীর স্ক্রোল হয়।

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th width="25%">First Name</th>
                <th width="13%">Last Name</th>
                <th width="25%" class="text-center">Address</th>
                <th width="25%" class="text-center">City</th>
                <th width="4%" class="text-center">State</th>
                <th width="8%" class="text-center">Zip</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-condensed table-scrollable">
            <tbody>
                <!-- add rows here, specifying same widths as in header, at least on one row -->
            </tbody>
        </table>
    </div>
    <table class="table table-hover table-striped table-condensed">
        <tfoot>
            <!-- add your footer here... -->
        </tfoot>
    </table>
</div>

এবং তারপরে স্রেফ নিম্নলিখিত সিএসএস প্রয়োগ করেছেন:

.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }

আমি আশা করি এটি অন্য কাউকে সহায়তা করে।

Comments

ধন্যবাদ এটি সাহায্য করে। দুর্ভাগ্যক্রমে আমি th ম উপাদানগুলির প্রস্থ নির্দিষ্ট করতে পারি না কারণ এটি বৈধ উপাদান নয়। (???)

— এরউইন রুইজাক্কার্স 13:51

— টিডি

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

— টড

Answer 5

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

আপনি কেবল সারণি ট্যাগটিতে একটি স্থির-শিরোনামের বৈশিষ্ট্য যুক্ত করে এটি ব্যবহার করেন:

<table class="table table-bordered" fixed-header>
...
</table>

আপনি যদি কৌনিকj ব্যবহার না করে থাকেন তবে আপনি নির্দেশিকার জাভাস্ক্রিপ্টটি টুইঙ্ক করতে পারেন এবং পরিবর্তে সরাসরি ব্যবহার করতে পারেন।

Answer 6

সিএসএস

.achievements-wrapper { height: 300px; overflow: auto; }

এইচটিএমএল

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>

Comments

উচ্চতা আপেক্ষিক রাখা সম্ভব?

— পাঙ্গি

পার্সেন্টস সহ উচ্চতা সেট করতে চাই। এটা কি সম্ভব? আমি এটি কাজ করতে পারে না।

— পাঙ্গি

অবশ্যই, সারণির উচ্চতাটি 100% এ সেট করুন। .table-class-name { height: 100%; }।

— টেরি

এটি আমার টেবিলটি প্রসারিত করে এবং এটি চালিয়ে যায়। (এর কোনও প্রভাব নেই)

— পাঙ্গি

এই পদ্ধতিতে, শিরোনামটি পাশাপাশি স্ক্রোলযোগ্য, সুতরাং টেবিল শিরোনাম ঠিক করার কোনও উপায় আছে কি?

— কাইলিনিনকিউবেটর

Answer 7

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

(স্থির প্রস্থের কলামটি হ'ল বড় সারি গণনা সারণীর জন্য যে পদ্ধতিটি আমি ব্যবহার করি তার জন্য কেবল শিরোনাম সারি সদৃশ প্রয়োজন)

কোডের উদাহরণ:

<div style="height:30px;overflow:hidden;margin-right:15px;">
   <table class="table">
       <thead>
           <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>


        </tbody>
    </table>
</div>
<div style="height:100px;overflow-y:scroll;;">
    <table class="table">
        <thead>

        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>
             <tr style="color:white">
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </tbody>
    </table>
</div>

Answer 8

টেবিলটি একটি ডিভের মধ্যে রাখুন এবং সেই ডিভটি ক্লাস করুন pre-scrollable।

Answer 9

আমি সম্প্রতি একটি অনুরূপ সমস্যা পেয়েছি এবং বিভিন্ন সমাধানের মিশ্রণটি ব্যবহার করে এটি ঠিক করেছি।

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

আমি যে কোডগুলি ব্যবহার করেছি সেগুলি এখানে রয়েছে:

        <table class="table table-striped table-hover" style="margin-bottom: 0px;">
        <thead>
            <tr>
                <th data-sort="id">Header 1</i></th>
                <th data-sort="guide">Header 2</th>
                <th data-sort="origin">Header 3</th>
                <th data-sort="supplier">Header 4</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-scrollable">
            <tbody id="rows"></tbody>
        </table>
    </div>

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

.bodycontainer {
  //height: 200px
  width: 100%;
  margin: 0;
}

.table-scrollable {
  margin: 0px;
  padding: 0px;
}

আমি এখানে উচ্চতাটি মন্তব্য করেছি কারণ পৃষ্ঠাগুলির উচ্চতা যাই হোক না কেন, আমি চেয়েছিলাম পৃষ্ঠার নীচে ছকটি পৌঁছাতে চাই।

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

fixHeaders: =>
  for header, i in @headers
    tdpadding = parseInt(@$("td[data-sort=#{header}]").css('padding'))
    tdwidth = parseInt(@$("td[data-sort=#{header}]").css('width'))
    @$("th[data-sort=#{header}]").css('padding', tdpadding)
    @$("th[data-sort=#{header}]").css('width', tdwidth)
    if (i+1) == @headers.length
      trwidth = @$("td[data-sort=#{header}]").parent().css('width')
      @$("th[data-sort=#{header}]").parent().parent().parent().css('width', trwidth)
      @$('.bodycontainer').css('height', window.innerHeight - ($('html').outerHeight() -@$('.bodycontainer').outerHeight() ) ) unless @collection.length == 0

এখানে আমি ধরে নিয়েছি যে আপনার কাছে @ হেডার নামক হেডারের একটি অ্যারে রয়েছে।

এটি সুন্দর নয় তবে এটি কাজ করে। আশা করি এটি কাউকে সাহায্য করবে।

Answer 10

উপরের সমস্ত সমাধান সারণী শিরোনামকেও স্ক্রোল করে তোলে ... আপনি যদি কেবল টবিকে স্ক্রোল করতে চান তবে এটি প্রয়োগ করুন:

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}

Comments

এটি কেবল তখনই কাজ করবে যদি এটির একটি একক কলামের টেবিল। আপনার যদি একাধিক কলাম সহ একটি টেবিল থাকে তবে এটি কেবল প্রথম কলামটিই স্ক্রোল তৈরি করবে।

— এম্পো

Answer 11

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

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

Answer 12

রে জোনাথন উডের পরামর্শ। আমি কোনও সিএমএস ব্যবহার করায় আমার কাছে নতুন ডিভের সাথে টেবিল মোড়ানোর বিকল্প নেই। JQuery ব্যবহার করে আমি যা করেছি তা এখানে:

$( "table" ).wrap( "<div class='table-overflow'></div>" );

এটি "টেবিল-ওভারফ্লো" শ্রেণীর সাথে একটি নতুন ডিভের সাথে টেবিলের উপাদানগুলিকে মোড়ানো।

তারপরে আপনি কেবল নিজের CSS ফাইলটিতে নিম্নলিখিত সংজ্ঞাটি যুক্ত করতে পারেন:

.table-overflow { overflow: auto; }     

Answer 13

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

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

Answer 14

বুটস্ট্র্যাপ ৪-এর সাথে কাজ করার জন্য উপরের কোনওটি না পাওয়ায় আমি এখানে পোস্ট করব ভেবেছিলাম আমি এটি অনলাইনে পেয়েছি এবং আমার জন্য নিখুঁতভাবে কাজ করেছি ...

table
{
    width: 100%;
    display: block;
    border:solid black 1px;
}

thead
{
    display: inline-block;
    width: 100%;
    height: 20px;
}

tbody
{
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

th, td
{
    width: 100px;
    border:solid 1px black;
    text-align:center;
}

আমি কাজ jsfindle সংযুক্ত করেছি।

https://jsfiddle.net/jgngg28t/

আশা করি এটি অন্য কাউকে সাহায্য করবে।