বুটস্ট্র্যাপ ব্যবহার করে কীভাবে মোবাইলে টেবিলগুলি প্রদর্শন করবেন?

Question 1

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

মোবাইল ভিউয়ের জন্য আমি কীভাবে টেবিল প্রস্থ সেট করতে পারি? বুটস্ট্র্যাপ ব্যবহার করে মোবাইল ভিউগুলিতে ট্যাবুলার ডেটা উপস্থাপনের আর কোন বিকল্প নেই?

Question 2

বুটস্ট্র্যাপ 3 প্রতিক্রিয়াশীল সারণীগুলি পরিচয় করিয়ে দেয় :

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

বুটস্ট্র্যাপ 4 অনুরূপ, তবে কয়েকটি নতুন ক্লাসের মাধ্যমে আরও নিয়ন্ত্রণের সাথে :

... সমস্ত viewports জুড়ে প্রতিক্রিয়াশীল ... সঙ্গে .table-responsive। অথবা, ব্যবহার করে একটি প্রতিক্রিয়াশীল টেবিল থাকা সর্বাধিক ব্রেকপয়েন্টটি বেছে নিন .table-responsive{-sm|-md|-lg|-xl}।

জেসন ব্র্যাডলিকে একটি উদাহরণ দেওয়ার জন্য কৃতিত্ব :

প্রতিক্রিয়াশীল টেবিল

Question 3

আপনি এগুলির মধ্যে একটি পদ্ধতির চেষ্টা করার বিষয়টিও বিবেচনা করতে পারেন, কারণ বড় টেবিলগুলি মোবাইলের সাথে ঠিকঠাক বন্ধুত্বপূর্ণ না হলেও এটি কার্যকর হয়:

http://elvery.net/demo/ দায়িত্বজ্ঞানহীন-টেবিলগুলি /

আমি 'নো মোর টেবিল' এর আংশিক, তবে এটি অবশ্যই আপনার আবেদনের উপর নির্ভর করে।

Question 4

বুটস্ট্র্যাপের মধ্যে থাকা সমস্ত টেবিলগুলি যে কন্টেইনারে রয়েছে সেগুলি অনুযায়ী প্রসারিত করুন You .spanআকারটি নিয়ন্ত্রণ করতে আপনি কোনও টেবিলের ভিতরে কোনও টেবিল রাখতে পারেন । এই SO প্রশ্ন আপনাকে সাহায্য করতে পারে

টুইটার বুটস্ট্র্যাপ টেবিলগুলির সর্বদা 100% প্রস্থ থাকে কেন?

Question 5

প্রায় 1 মাস ধরে গবেষণা করার পরে আমি নীচের কোডটি পেয়েছি যা আমার ওয়েবসাইটটিতে খুব সুন্দর এবং 100% নিখুঁতভাবে কাজ করছে। পূর্বরূপটি কীভাবে এটি কাজ করছে তা পরীক্ষা করতে আপনি লিঙ্কটি থেকে চেক করতে পারেন। https://www.jobsedit.in/state-go સરકાર-jobs/

সিএসএস কোড -----

@media only screen and (max-width: 500px)  {
    .resp table  { 
        display: block ; 
    }   
    .resp th  { 
        position: absolute;
        top: -9999px;
        left: -9999px;
        display:block ;
    }   
     .resp tr { 
    border: 1px solid #ccc;
    display:block;
    }   
    .resp td  { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        width:100%;
        background-color:White;
        text-indent: 50%; 
        text-align:left;
        padding-left: 0px;
        display:block;      
    }
    .resp  td:nth-child(1)  {
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        font-size:20px;
        text-indent: 0%;
        text-align:center;
}   
    .resp td:before  { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        text-indent: 0%;
        text-align:left;
        white-space: nowrap;
        background-color:White;
        font-weight:bold;
    }
    /*
    Label the data
    */
    .resp td:nth-of-type(2):before  { content: attr(data-th) }
    .resp td:nth-of-type(3):before  { content: attr(data-th) }
    .resp td:nth-of-type(4):before  { content: attr(data-th) }
    .resp td:nth-of-type(5):before  { content: attr(data-th) }
    .resp td:nth-of-type(6):before  { content: attr(data-th) }
    .resp td:nth-of-type(7):before  { content: attr(data-th) }
    .resp td:nth-of-type(8):before  { content: attr(data-th) }
    .resp td:nth-of-type(9):before  { content: attr(data-th) }
    .resp td:nth-of-type(10):before  { content: attr(data-th) }
}

এইচটিএমএল কোড -

<table>
<tr>
<td data-th="Heading 1"></td>
<td data-th="Heading 2"></td>
<td data-th="Heading 3"></td>
<td data-th="Heading 4"></td>
<td data-th="Heading 5"></td>
</tr>
</table>