အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
in English

စားပွဲများ

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

ခြုံငုံသုံးသပ်ချက်

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

အခြေခံအကျဆုံးဇယားကိုအသုံးပြု၍ .tableBootstrap တွင် -based tables များကိုဤနေရာတွင်ကြည့်ရှုပါ။

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

မျိုးကွဲများ

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

အတန်း ခေါင်းစီး ခေါင်းစီး
ပုံသေ ဆဲလ် ဆဲလ်
မူလတန်း ဆဲလ် ဆဲလ်
အလယ်တန်း ဆဲလ် ဆဲလ်
အောင်မြင်မှု ဆဲလ် ဆဲလ်
အန္တရာယ် ဆဲလ် ဆဲလ်
သတိပေးချက် ဆဲလ် ဆဲလ်
အချက်အလက် ဆဲလ် ဆဲလ်
အလင်း ဆဲလ် ဆဲလ်
မှောငျမိုကျသော ဆဲလ် ဆဲလ်
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>
အကူအညီပေးသောနည်းပညာများကို အဓိပ္ပာယ်ဖွင့်ဆိုခြင်း။

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

အသံထွက်ဇယားများ

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

. .table-striped_ <tbody>_

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-striped">
  ...
</table>

ဤအတန်းများကို ဇယားမျိုးကွဲများတွင်လည်း ထည့်သွင်းနိုင်သည်-

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-dark table-striped">
  ...
</table>
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-success table-striped">
  ...
</table>

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

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

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-hover">
  ...
</table>
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-dark table-hover">
  ...
</table>

ဤရွေ့လျားနိုင်သော အတန်းများသည် အစင်းကြောင်းမျိုးကွဲများနှင့်လည်း ပေါင်းစပ်နိုင်သည်-

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-striped table-hover">
  ...
</table>

တက်ကြွသောစားပွဲများ

အတန်းတစ်ခုကို ထည့်ခြင်းဖြင့် ဇယားအတန်း သို့မဟုတ် ဆဲလ်တစ်ခုကို မီးမောင်းထိုးပြပါ .table-active

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ပုံစံကွဲများနှင့် အသံထွက်ဇယားများ မည်သို့အလုပ်လုပ်သနည်း။

အသံထွက်ဇယားများ ( အစင်းတန်းများပျံဝဲနိုင်သော အတန်း များနှင့် တက်ကြွသောဇယားများ ) အတွက် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ ဇယားမျိုးကွဲ အားလုံးအတွက် ဤအကျိုးသက်ရောက်မှုများကို လုပ်ဆောင်ရန် နည်းပညာအချို့ကို အသုံးပြုခဲ့သည် ။

  • --bs-table-bgကျွန်ုပ်တို့သည် စိတ်ကြိုက်ပိုင်ဆိုင်မှု ဖြင့် ဇယားဆဲလ်တစ်ခု၏ နောက်ခံကို သတ်မှတ်ခြင်းဖြင့် စတင်သည် ။ ထို့နောက် ဇယားအမျိုးကွဲအားလုံးသည် ဇယားဆဲလ်များကို အရောင်ခြယ်ရန် ထိုစိတ်ကြိုက်ပိုင်ဆိုင်မှုကို သတ်မှတ်ပေးသည်။ ဤနည်းအားဖြင့်၊ တစ်ပိုင်းမြင်သာသောအရောင်များကို စားပွဲနောက်ခံအဖြစ် အသုံးပြုပါက ပြဿနာမတက်ပါ။
  • box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ထို့နောက် သတ်မှတ်ထားသော မည်သည့်အပေါ်တွင်မဆို အလွှာတစ်ခု နှင့် ဇယားဆဲလ်များပေါ်တွင် inset box အရိပ်တစ်ခု ပေါင်းထည့်သည် background-color။ ကျွန်ုပ်တို့သည် ကြီးမားသောဖြန့်ကျက်မှုကို အသုံးပြု၍ မှုန်ဝါးခြင်းမရှိသောကြောင့်၊ အရောင်သည် မိုနိုသံဖြစ်ပါမည်။ ပုံသေဖြင့် မသတ်မှတ်ထားသောကြောင့်၊ ကျွန်ုပ်တို့ --bs-table-accent-bgတွင် ပုံသေပုံးအရိပ်တစ်ခု မရှိပါ။
  • နှစ်ခုလုံး သို့မဟုတ် အတန်းများကို ပေါင်းထည့်သောအခါ၊ နောက်ခံ .table-stripedကို အရောင်ခြယ်ရန် semitransparent အရောင်အဖြစ် သတ်မှတ်ထားသည်။.table-hover.table-active--bs-table-accent-bg
  • ဇယားတစ်မျိုးစီအတွက်၊ ကျွန်ုပ်တို့သည် --bs-table-accent-bgထိုအရောင်ပေါ်မူတည်၍ ဆန့်ကျင်ဘက်အမြင့်မားဆုံးအရောင်တစ်ခုကို ထုတ်လုပ်ပါသည်။ ဥပမာအားဖြင့်၊ လေယူလေသိမ်းအရောင် သည် ပေါ့ပါးသောလေယူလေသိမ်းအရောင် .table-primaryရှိသော်လည်း ၊.table-dark
  • စာသားနှင့် ဘောင်အရောင်များကို တူညီသောနည်းလမ်းဖြင့် ထုတ်လုပ်ပြီး ၎င်းတို့၏အရောင်များကို မူရင်းအတိုင်း အမွေဆက်ခံပါသည်။

မြင်ကွင်းတွေရဲ့ နောက်ကွယ်မှာ ဒီလိုပုံစံ

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

ဇယားဘောင်များ

နယ်ခြားထားသော စားပွဲများ

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

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-bordered">
  ...
</table>

အရောင်ပြောင်းရန်အတွက် ဘောင်အရောင်အသုံးအဆောင်များ ကို ထည့်နိုင်သည်-

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-bordered border-primary">
  ...
</table>

နယ်နိမိတ်မရှိသောစားပွဲများ

.table-borderlessနယ်နိမိတ်မရှိသော စားပွဲတစ်ခုအတွက် ထည့်ပါ ။

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-borderless">
  ...
</table>
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-dark table-borderless">
  ...
</table>

စားပွဲလေးတွေ

ဆဲလ်အားလုံးကို တစ်ဝက်ခွဲ ဖြတ်ပြီး ပိုကျစ်လျစ် .table-smအောင် ပေါင်းထည့်ပါ ။.tablepadding

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-sm">
  ...
</table>
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-dark table-sm">
  ...
</table>

ဒေါင်လိုက် ချိန်ညှိခြင်း။

ဇယားဆဲလ်များ၏ <thead>အောက်ခြေသို့ အမြဲဒေါင်လိုက် ညှိထားသည်။ ဇယားဆဲလ်များသည် <tbody>၎င်းတို့၏ ချိန်ညှိမှုမှ အမွေဆက်ခံ <table>ပြီး ပုံသေအားဖြင့် ထိပ်သို့ ချိန်ညှိထားသည်။ လိုအပ်သည့်နေရာတွင် ပြန်လည် ချိန်ညှိရန် ဒေါင်လိုက် အတန်းများကို အသုံးပြုပါ ။

ခေါင်းစဉ် ၁ ခေါင်းစီး ၂ ခေါင်းစဉ် ၃ ခေါင်းစဉ် ၄
ဤဆဲလ် vertical-align: middle;သည် ဇယားမှ အမွေဆက်ခံသည်။ ဤဆဲလ် vertical-align: middle;သည် ဇယားမှ အမွေဆက်ခံသည်။ ဤဆဲလ် vertical-align: middle;သည် ဇယားမှ အမွေဆက်ခံသည်။ ဤနေရာတွင် ဒေါင်လိုက်ချိန်ညှိမှုသည် ရှေ့ဆဲလ်များတွင် မည်သို့အလုပ်လုပ်ကြောင်းပြသရန် ဒေါင်လိုက်နေရာအနည်းငယ်ယူရန် ရည်ရွယ်ထားသော နေရာကိုင်ဆောင်ထားသည့်စာသားအချို့ဖြစ်သည်။
ဤဆဲလ် vertical-align: bottom;သည် ဇယားအတန်းမှ အမွေဆက်ခံသည်။ ဤဆဲလ် vertical-align: bottom;သည် ဇယားအတန်းမှ အမွေဆက်ခံသည်။ ဤဆဲလ် vertical-align: bottom;သည် ဇယားအတန်းမှ အမွေဆက်ခံသည်။ ဤနေရာတွင် ဒေါင်လိုက်ချိန်ညှိမှုသည် ရှေ့ဆဲလ်များတွင် မည်သို့အလုပ်လုပ်ကြောင်းပြသရန် ဒေါင်လိုက်နေရာအနည်းငယ်ယူရန် ရည်ရွယ်ထားသော နေရာကိုင်ဆောင်ထားသည့်စာသားအချို့ဖြစ်သည်။
ဤဆဲလ် vertical-align: middle;သည် ဇယားမှ အမွေဆက်ခံသည်။ ဤဆဲလ် vertical-align: middle;သည် ဇယားမှ အမွေဆက်ခံသည်။ ဤဆဲလ်ကို အပေါ်ဘက်သို့ ညှိထားသည်။ ဤနေရာတွင် ဒေါင်လိုက်ချိန်ညှိမှုသည် ရှေ့ဆဲလ်များတွင် မည်သို့အလုပ်လုပ်ကြောင်းပြသရန် ဒေါင်လိုက်နေရာအနည်းငယ်ယူရန် ရည်ရွယ်ထားသော နေရာကိုင်ဆောင်ထားသည့်စာသားအချို့ဖြစ်သည်။
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

အသိုက်

ဘောင်ပုံစံများ၊ တက်ကြွသောပုံစံများနှင့် ဇယားမျိုးကွဲများကို nested ဇယားများဖြင့် အမွေဆက်ခံထားခြင်းမရှိပါ။

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ခေါင်းစီး ခေါင်းစီး ခေါင်းစီး
တစ် ပထမ နောက်ဆုံး
ပထမ နောက်ဆုံး
ပထမ နောက်ဆုံး
လာရီ ငှက် @twitter
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

nesting အလုပ်လုပ်ပုံ

nested tables များဆီသို့ မည်သည့် စတိုင်များ ပေါက်ကြားခြင်းမှ ကာကွယ်ရန် ၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ >CSS တွင် ကလေးပေါင်းစည်းခြင်း () ရွေးချယ်မှုစနစ်ကို အသုံးပြုပါသည်။ ကျွန်ုပ်တို့သည် , , နှင့် , နှင့် , tdတို့တွင် s နှင့် ths အားလုံးကို ပစ်မှတ်ထားရန် လိုအပ်သောကြောင့် ၊ ကျွန်ုပ်တို့၏ ရွေးချယ်သူသည် ၎င်းမပါဘဲ အတော်လေး ရှည်နေမည်ဖြစ်သည်။ ထို့ကြောင့်၊ ကျွန်ုပ်တို့သည် s နှင့် s အားလုံးကို ပစ်မှတ်ထားရန် ထူးဆန်းသောပုံသဏ္ဍာန်ရွေးချယ် သည့်ကိရိယာကို အသုံးပြု သော်လည်း ဖြစ်နိုင်ချေရှိသော nested table တစ်ခုမျှမရှိပါ။theadtbodytfoot.table > :not(caption) > * > *tdth.table

အကယ်၍ သင်သည် <tr>s ကို ဇယားတစ်ခု၏ တိုက်ရိုက်ကလေးများအဖြစ် ထည့်ပါက၊ ၎င်းတို့ကို ပုံသေဖြင့် <tr>ထုပ်ပိုးထားမည်ဖြစ်ပြီး <tbody>၊ ထို့ကြောင့် ကျွန်ုပ်တို့၏ ရွေးခြယ်မှုများကို ရည်ရွယ်ထားသည့်အတိုင်း လုပ်ဆောင်နိုင်စေရန် သတိပြုပါ။

ခန္ဓာဗေဒ

စားပွဲခေါင်း

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

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီ ငှက် @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီ ငှက် @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

စားပွဲခြေ

# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီ ငှက် @twitter
အောက်ခြေမှတ်တိုင် အောက်ခြေမှတ်တိုင် အောက်ခြေမှတ်တိုင် အောက်ခြေမှတ်တိုင်
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

စာတန်းများ

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

အသုံးပြုသူများစာရင်း
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီငှက် @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<caption>စားပွဲထိပ် ပေါ်မှာလည်း တင်ထား လို့ရပါတယ် .caption-top

အသုံးပြုသူများစာရင်း
# ပထမ နောက်ဆုံး ကိုင်တွယ်ပါ။
မှတ်သားပါ။ အော့တို @mdo
ယာကုပ် Thornton @ဖြိုး
လာရီ ငှက် @twitter
<table class="table caption-top">
  <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|-xxl}

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

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|-xxl}သီးခြားနေရာတစ်ခုအထိ တုံ့ပြန်မှုဇယားများကို ဖန်တီးရန် လိုအပ်သလို အသုံးပြု ပါ။ ထို breakpoint နှင့် အထက်တွင်၊ ဇယားသည် ပုံမှန်အတိုင်း လုပ်ဆောင်ပြီး အလျားလိုက် မရွေ့ပါ။

သတ်မှတ်ထားသော viewport widths တွင် ၎င်းတို့၏ တုံ့ပြန်မှုပုံစံများ မသက်ရောက်မချင်း ဤဇယားများ ပျက်သွားနိုင်သည်။

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

<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>

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

ဆူး

ကိန်းရှင်များ

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

ဒကာ

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

စိတ်တိုင်းကျ

  • ဇယားကွဲကွဲပြားမှုများရှိ ဆန့်ကျင်ဘက်များကို ဆုံးဖြတ်ရန် factor variables ( $table-striped-bg-factor, $table-active-bg-factor& ) ကို အသုံးပြုသည်။$table-hover-bg-factor
  • အလင်းနှင့် အမှောင် စားပွဲအမျိုးအစားများအပြင် အပြင်အဆင်အရောင်များကို ပြောင်းလဲနိုင်သောပုံစံဖြင့် လင်း $table-bg-levelစေသည်။