Source

စားပွဲများ

Bootstrap ဖြင့် (၎င်းတို့၏အသုံးများသော JavaScript ပလပ်အင်များတွင် ပေးထားသည်) ဇယားများ၏ရွေးချယ်မှုပုံစံအတွက် စာရွက်စာတမ်းများနှင့် နမူနာများ။

ဥပမာများ

ပြက္ခဒိန်များနှင့် ရက်စွဲရွေးချယ်မှုများကဲ့သို့သော ပြင်ပဝစ်ဂျက်များတစ်လျှောက် ဇယားများကို ကျယ်ကျယ်ပြန့်ပြန့်အသုံးပြုခြင်းကြောင့်၊ ကျွန်ုပ်တို့၏ဇယားများကို ရွေးချယ် ဝင်ရောက်ရန် ဒီဇိုင်းထုတ် ထားပါသည်။ အခြေခံ အတန်းအစား .tableကို မည်သည့်အရာသို့မဆို ထည့်ပါ <table>၊ ထို့နောက် စိတ်ကြိုက်စတိုင်များ သို့မဟုတ် ကျွန်ုပ်တို့၏ အမျိုးမျိုးသော ပါဝင်သော မွမ်းမံမှုအတန်းများဖြင့် တိုးချဲ့ပါ။

အခြေခံအကျဆုံးဇယားကိုအသုံးပြု၍ .tableBootstrap တွင် -based tables များကိုဤနေရာတွင်ကြည့်ရှုပါ။ ဇယားပုံစံအားလုံးကို Bootstrap 4 တွင် အမွေဆက်ခံထားပြီး ဆိုလိုသည်မှာ မည်သည့် nested tables မဆို parent ကဲ့သို့ ပုံစံအတိုင်း ပုံစံချမည်ဖြစ်သည်။

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီ ငှက် @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

အမှောင်နောက်ခံတွင် အလင်းစာသားများဖြင့် အရောင်များကို ပြောင်းပြန်လှန်နိုင်သည် .table-dark။

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီ ငှက် @twitter 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

စားပွဲခေါင်းရွေးချယ်စရာများ

စားပွဲများနှင့် အမှောင်ဇယားများကဲ့သို့၊ ပြုပြင်မွမ်းမံထားသော အတန်းများကို အသုံးပြု ပါ .thead-lightသို့မဟုတ် မီးခိုးရောင် အလင်း သို့မဟုတ် မီးခိုးရောင် ပေါ်လာ .thead-darkစေရန် ။<thead>

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီ ငှက် @twitter
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီ ငှက် @twitter 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

အစင်းတန်းများ

. .table-striped_ <tbody>_

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီ ငှက် @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီ ငှက် @twitter 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

နယ်နိမိတ် ဇယား

.table-borderedဇယားနှင့် ဆဲလ်များအားလုံးရှိ ဘောင်များအတွက် ထည့်ပါ ။

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီငှက် @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီငှက် @twitter 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ပျံဝဲနိုင်သော အတန်းများ

.table-hoverစားပွဲအတန်းများအတွင်း ပျံဝဲနေသော အခြေအနေတစ်ခုကို ဖွင့်ရန် ထည့်ပါ <tbody>။

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီငှက် @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီငှက် @twitter 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

စားပွဲငယ်လေး

.table-smဆဲလ်အကွက်များကို တစ်ဝက်ခန့်ဖြတ်ခြင်းဖြင့် ဇယားများကို ပိုမိုကျစ်လစ်စေရန် ပေါင်းထည့်ပါ ။

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီငှက် @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီငှက် @twitter 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ဆက်စပ်အတန်းများ

ဇယားအတန်းများ သို့မဟုတ် ဆဲလ်တစ်ခုချင်းစီကို အရောင်ခြယ်ရန် ဆက်စပ်အတန်းများကို အသုံးပြုပါ။

အတန်း ခေါင်းစီး ခေါင်းစီး
အသက်ဝင်သည်။ ဆဲလ် ဆဲလ်
ပုံသေ ဆဲလ် ဆဲလ်
မူလတန်း ဆဲလ် ဆဲလ်
အလယ်တန်း ဆဲလ် ဆဲလ်
အောင်မြင်မှု ဆဲလ် ဆဲလ်
အန္တရာယ် ဆဲလ် ဆဲလ်
သတိပေးချက် ဆဲလ် ဆဲလ်
အချက်အလက် ဆဲလ် ဆဲလ်
အလင်း ဆဲလ် ဆဲလ်
မှောငျမိုကျသော ဆဲလ် ဆဲလ် 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

ပုံမှန်ဇယားနောက်ခံမျိုးကွဲများကို အမှောင်ဇယားတွင် မရရှိနိုင်သော်လည်း အလားတူပုံစံများရရှိရန် စာသား သို့မဟုတ် နောက်ခံအသုံးအဆောင်များ ကို သင်အသုံးပြုနိုင်ပါသည်။

# ခေါင်းစီး ခေါင်းစီး
၁ ဆဲလ် ဆဲလ်
၂ ဆဲလ် ဆဲလ်
၃ ဆဲလ် ဆဲလ်
၄ ဆဲလ် ဆဲလ်
၅ ဆဲလ် ဆဲလ်
၆ ဆဲလ် ဆဲလ်
၇ ဆဲလ် ဆဲလ်
၈ ဆဲလ် ဆဲလ်
၉ ဆဲလ် ဆဲလ် 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
အကူအညီပေးသောနည်းပညာများကို အဓိပ္ပာယ်ဖွင့်ဆိုခြင်း။

အဓိပ္ပါယ်ထည့်ရန် အရောင်ကိုအသုံးပြုခြင်းသည် မျက်နှာပြင်ဖတ်စက်များကဲ့သို့သော အထောက်အကူနည်းပညာများကို အသုံးပြုသူများထံ ပေးပို့မည်မဟုတ်သည့် အမြင်အာရုံညွှန်ပြမှုတစ်ခုသာဖြစ်သည်။ အရောင်ဖြင့် ဖော်ပြထားသော အချက်အလက်သည် အကြောင်းအရာ ကိုယ်တိုင် (ဥပမာ မြင်နိုင်သော စာသား) သို့မဟုတ် .sr-onlyအတန်းထဲတွင် ဝှက်ထားသော အပိုစာသားများကဲ့သို့ အခြားနည်းလမ်းများဖြင့် ပါဝင်ကြောင်း သေချာပါစေ။

.tableတစ်ခုခုကို ထုပ်ပိုးခြင်း ဖြင့် တုံ့ပြန်မှုဇယားများကို ဖန်တီး ပါ၊ 576px၊ 768px၊ 992px နှင့် 1120px အသီးသီးအထိရှိသော breakpoint .table-responsive{-sm|-md|-lg|-xl}တစ်ခုစီတွင် အလျားလိုက် scroll လုပ် ပါ။max-width

ဘရောက်ဆာများသည် အပိုင်းအခြားဆက်စပ်မေးခွန်းများကို လောလောဆယ်တွင် မပံ့ပိုး နိုင်သော ကြောင့်၊ ဤနှိုင်းယှဉ်မှုများအတွက် ပိုမိုတိကျသောတန်ဖိုးများကိုအသုံးပြုခြင်းဖြင့် အပိုင်းပိုင်းအနံများနှင့် အပိုင်းပိုင်းအကျယ်များ (ဥပမာအားဖြင့်၊ မြင့်မားသော dpi စက်ပစ္စည်းများတွင် ဖြစ်ပေါ်နိုင်သည်) ၏ ကန့်သတ်ချက်များ min-နှင့် max-ရှေ့ဆက် မှုများနှင့် viewports များကို ဝိုင်းဝန်းလုပ်ဆောင်နေကြောင်း သတိပြုပါ။ .

စာတန်းများ

<caption>စားပွဲတစ်ခုအတွက် ခေါင်းစဉ်တစ်ခုကဲ့သို့ လုပ်ဆောင်သည် ။ ၎င်းသည် စခရင်ဖတ်သူများပါရှိသော အသုံးပြုသူများအား ဇယားတစ်ခုရှာဖွေရန်နှင့် ၎င်းနှင့်ပတ်သက်သည့်အရာကို နားလည်ရန်နှင့် ၎င်းကိုဖတ်လိုခြင်းရှိမရှိ ဆုံးဖြတ်ရန် ကူညီပေးသည်။

အသုံးပြုသူများစာရင်း
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
၁ မှတ်သားပါ။ အော့တို @mdo
၂ ယာကုပ် Thornton @ဖြိုး
၃ လာရီ ငှက် @twitter 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

တုံ့ပြန်မှုဇယားများ

Responsive tables များသည် ဇယားများကို အလျားလိုက် လွယ်ကူစွာ လှိမ့်နိုင်စေပါသည်။ .tableဇယားတစ်ခု နှင့် ပတ်ထားခြင်းဖြင့် viewports အားလုံးတွင် တုံ့ပြန်မှုပြုလုပ် ပါ .table-responsive။ သို့မဟုတ်၊ အသုံးပြု၍ တုံ့ပြန်မှုဇယားတစ်ခုရှိရန် အများဆုံး breakpoint ကို ရွေးပါ .table-responsive{-sm|-md|-lg|-xl}။

ဒေါင်လိုက်ဖြတ်တောက်ခြင်း/ဖြတ်တောက်ခြင်း

Responsive Tables သည် ဇယား overflow-y: hidden၏အောက်ခြေ သို့မဟုတ် အပေါ်ဘက်အစွန်းများထက်ကျော်လွန်သွားသည့် မည်သည့်အကြောင်းအရာကိုမဆို ကလစ်ဖြတ်ထားသည့်အရာကို အသုံးပြုသည်။ အထူးသဖြင့်၊ ၎င်းသည် dropdown menus နှင့် အခြားသော third-party widget များကို ဖြတ်တောက်နိုင်သည်။

အမြဲတမ်းတုံ့ပြန်မှု

ခွဲမှတ်တိုင်းတွင် .table-responsiveအလျားလိုက် လှိမ့်နေသော ဇယားများကို အသုံးပြုပါ။

# ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး
၁ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
၂ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
၃ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint အတိအကျ

.table-responsive{-sm|-md|-lg|-xl}သီးခြားနေရာတစ်ခုအထိ တုံ့ပြန်မှုဇယားများကို ဖန်တီးရန် လိုအပ်သလို အသုံးပြု ပါ။ ထို breakpoint နှင့် အထက်တွင်၊ ဇယားသည် ပုံမှန်အတိုင်း လုပ်ဆောင်ပြီး အလျားလိုက် မရွေ့ပါ။

# ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး
၁ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
၂ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
၃ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
# ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး
၁ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
၂ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
၃ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
# ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး
၁ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
၂ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
၃ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
# ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး
၁ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
၂ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ်
၃ ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် ဆဲလ် 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

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

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

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