in English

Miisaska

Dukumeenti iyo tusaaleyaal door-bixsiga qaabaynta miisaska (iyada oo la siinayo isticmaalkooda baahsan ee JavaScript plugins) oo wata Bootstrap.

Boggaan

Dulmar

Sababo la xiriira isticmaalka baahsan ee <table>canaasirta guud ahaan widgets qolo saddexaad sida jadwaladaha iyo taariikhda doorayaasha, miisaska Bootstrap waa la dooranayaa . Ku dar fasalka aasaasiga ah .tablemid kasta <table>, ka dibna ku kordhi fasalladayada wax ka beddelka ikhtiyaarka ah ama qaababka gaarka ah. Dhammaan qaababka miiska laguma dhaxlo Bootstrap, taasoo la micno ah in miisas kasta oo buul ah lagu qaabayn karo si ka madax bannaan waalidka.

Isticmaalka calaamadaynta miiska ugu aasaasiga ah, halkan waa sida .tablemiisaska ku salaysan u eegaan Bootstrap.

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@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>

Kala duwanaanshiyaha

Isticmaal fasalo macnaha guud midabaynta miisaska, safafka miiska ama unugyada gaarka ah.

Fasalka	Ciwaanka	Ciwaanka
Asal ahaan	Unug	Unug
Asal ahaan	Unug	Unug
Sare	Unug	Unug
Guul	Unug	Unug
Khatar	Unug	Unug
Digniin	Unug	Unug
Xog	Unug	Unug
Iftiin	Unug	Unug
Madow	Unug	Unug

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

U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .visually-hiddenfasalka dhexdiisa ku qarsoon.

Miisaska la dajiyay

Safafka la jeexay

Isticmaal .table-stripedsi aad ugu darto xariijimo zebra saf kasta oo ku dhex jira <tbody>.

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-striped">
  ...
</table>

Tiirar xariif ah

Isticmaal .table-striped-columnssi aad ugu darto zebra-line tiir kasta oo miiska.

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-striped-columns">
  ...
</table>

Fasaladan waxa kale oo lagu dari karaa kala duwanaanshaha miiska:

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-dark table-striped-columns">
  ...
</table>

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-success table-striped">
  ...
</table>

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-success table-striped-columns">
  ...
</table>

Safafka lulsan kara

Ku dar .table-hoversi aad awood ugu yeelatid heerka dulmanaha ee safafka miiska gudaha a <tbody>.

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-hover">
  ...
</table>

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Safafkan la rogman karo waxa kale oo lagu dari karaa safafka xariifsan ee kala duwan:

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Miisaska firfircoon

Muuji safka miiska ama unugga adiga oo ku daraya .table-activefasal.

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@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>

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@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>

Sidee bay u shaqeeyaan noocyada iyo miisaska lahjadeeyay?

Miisaska lahjadda leh ( safafka xariifsan , tiirarka xariifsan , safafka la dhufsan karo , iyo miisaska firfircoon ), waxaanu isticmaalnay farsamooyin qaar si aanu saamayntan uga dhigno mid u shaqeeya dhammaan noocyada miiskayada :

Waxaan ku bilaabeynaa inaan dejino asalka unugga miiska oo leh --bs-table-bghantidii caadiga ahayd. Dhammaan kala duwanaanshiyaha miiska ayaa dejinaya hantida caadada u ah si ay u midabeeyaan unugyada miiska. Sidan, ma galno dhibaato haddii midabada hufan loo isticmaalo asalka miiska.
Kadibna waxaan ku darnaa hadhka sanduuqa gudaha ee unugyada miiska oo leh box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lakabka sare ee wax kasta oo la cayimay background-color. Sababtoo ah waxaan isticmaalnaa faafin weyn oo aan lahayn blur, midabku wuxuu noqon doonaa monotone. Maadaama --bs-table-accent-bgaan si caadi ah loo dejin, ma hayno hooska sanduuqa ee caadiga ah.
Marka mid .table-striped, .table-striped-columns, .table-hoverama .table-activefasalo lagu daro, --bs-table-accent-bgwaxaa loo dejiyaa midab simi transparent si loo midabeeyo asalka.
Kala duwanaanshiyaha miis kasta, waxaan soo saareynaa --bs-table-accent-bgmidab leh farqiga ugu sarreeya taas oo ku xiran midabkaas. Tusaale ahaan, midabka lahjadda loogu talagalay .table-primarywaa madow halka .table-darkuu leeyahay midab lahjad khafiif ah.
Midabada qoraalka iyo soohdimaha ayaa si isku mid ah loo soo saaray, midabkoodana waxaa lagu dhaxlayaa si caadi ah.

Muuqaalka gadaashiisa waxay u egtahay sidan:

@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));
    $border-color: mix($color, $background, percentage($table-border-factor));

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

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Xuduudaha miiska

Miisaska xuduudaha

Ku dar .table-borderedsoohdimaha dhammaan dhinacyada miiska iyo unugyada.

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

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

Utility midabka xuduudaha ayaa lagu dari karaa si loo beddelo midabada:

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Miisas aan xuduud lahayn

Ku dar .table-borderlessmiis aan xuduud lahayn.

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-borderless">
  ...
</table>

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Miisaska yaryar

Ku dar .table-smsi aad u samaysid mid .tablekale oo is haysta adiga oo dhammaan unugyada paddingkala badh ka jaraya.

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-sm">
  ...
</table>

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Qaybiyayaal kooxeed

Ku dar soohdin ka dhumuc weyn, oo ka madow inta u dhexeysa kooxaha miiska - <thead>, <tbody>, iyo <tfoot>- leh .table-group-divider. Habbee midabka adiga oo bedelaya kan border-top-color(kaas oo aanan hadda bixin fasalka utility wakhtigan).

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

html

<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 class="table-group-divider">
    <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>

toosan toosan

Unugyada miiska <thead>ayaa had iyo jeer toosan xagga hoose. Unugyada miiska ee ku jira waxay ka <tbody>dhaxlaan toosintooda <table>oo waxay la jaanqaadaan xagga sare si caadi ah. Isticmaal fasalada toosan si aad dib ugu toosiso halka loo baahdo.

Ciwaanka 1	Ciwaanka 2	Ciwaanka 3	Ciwaanka 4
Unuggani waxa uu ka dhaxlaa `vertical-align: middle;`miiska	Unuggani waxa uu ka dhaxlaa `vertical-align: middle;`miiska	Unuggani waxa uu ka dhaxlaa `vertical-align: middle;`miiska	Halkan waxaa ku qoran qaar ka mid ah qoraalka meeleeyaha, loogu talagalay in lagu qaado meel bannaan oo toosan, si loo muujiyo sida toosinta toosan ee unugyada hore.
Unuggani waxa uu ka dhaxlaa `vertical-align: bottom;`safka miiska	Unuggani waxa uu ka dhaxlaa `vertical-align: bottom;`safka miiska	Unuggani waxa uu ka dhaxlaa `vertical-align: bottom;`safka miiska	Halkan waxaa ku qoran qaar ka mid ah qoraalka meeleeyaha, loogu talagalay in lagu qaado meel bannaan oo toosan, si loo muujiyo sida toosinta toosan ee unugyada hore.
Unuggani waxa uu ka dhaxlaa `vertical-align: middle;`miiska	Unuggani waxa uu ka dhaxlaa `vertical-align: middle;`miiska	Unuggani waxa uu la siman yahay xagga sare.	Halkan waxaa ku qoran qaar ka mid ah qoraalka meeleeyaha, loogu talagalay in lagu qaado meel bannaan oo toosan, si loo muujiyo sida toosinta toosan ee unugyada hore.

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

Buul

Qaababka xudduudaha, qaababka firfircoon, iyo kala duwanaanshaha miiska laguma dhaxlo miisaska buulka leh.

Marka hore

Dambe

Qabasho

Calaamadee

Otto

@mdo

Madax	Madax	Madax
A	Marka hore	Dambe
B	Marka hore	Dambe
C	Marka hore	Dambe

Larry

Shimbirka

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Sida buulku u shaqeeyo

Si aan uga hortagno in qaab kasta uu ku daadanayo miisaska buulka leh, waxaan isticmaalnaa isku-duwaha carruurta ( >) ee CSS-tayada. Maadaama aan u baahanahay in aan bartilmaameedsanno dhammaan tds iyo ths ku jira thead, tbody, iyo tfoot, doorashadayadu waxay u ekaan doontaa mid aad u dheer la'aanteed. Sidan oo kale, waxaan u isticmaalnaa doore muuqaal qurux badan .table > :not(caption) > * > *si aan u beegsano dhammaan tds iyo ths of the .table, laakiin midna miisaska buul ka iman kara.

Ogsoonow in haddii aad ku darto <tr>s sida carruurta tooska ah ee miiska, kuwaas <tr>waxaa lagu duuduubi doonaa si aan <tbody>caadi ahayn, sidaas awgeed xulashadayada waxay u shaqeeyaan sidii loogu talagalay.

Anatomy

Madaxa miiska

Si la mid ah miisaska iyo miisaska mugdiga ah, isticmaal fasallada wax ka beddelka .table-lightama .table-darksi aad uga dhigto <thead>s iftiin ama cawl madow.

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry	Shimbirka	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry	Shimbirka	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Lugta miiska

#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry	Shimbirka	@twitter
Lug	Lug	Lug	Lug

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Qoraallo

Shaqooyin sida <caption>miiska loo socdo. Waxay ka caawisaa isticmaalayaasha akhristayaasha shaashadda si ay u helaan miis oo ay fahmaan waxa ku saabsan oo ay go'aansadaan haddii ay rabaan inay akhriyaan.

Liiska isticmaalayaasha
#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry the Bird		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Waxa kale oo aad ku dhejin kartaa <caption>dusha sare ee miiska .caption-top.

Liiska isticmaalayaasha
#	Marka hore	Dambe	Qabasho
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry	Shimbirka	@twitter

html

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

Miisaska jawaab celinta

Jadwalka jawaabaha leh ayaa u oggolaanaya miisaska in si sahlan loo rogo si toos ah. Miis kasta ka dhig mid u jawaabaya dhammaan goobaha daawashada adiga oo ku .tableduubaya .table-responsive. Ama, soo qaado meesha ugu sarreysa ee aad ku yeelan karto miis jawaab celin leh adigoo isticmaalaya .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Goyn toosan/goyn

Miisaska ka jawaaba ayaa isticmaala overflow-y: hidden, kaas oo gooya wax kasta oo ka baxsan cidhifyada hoose ama sare ee miiska. Gaar ahaan, tani waxay gooyn kartaa liiska hoos-u-dhaca iyo aaladaha kale ee qolo saddexaad.

Had iyo jeer u jawaaba

Meel kasta oo jaban, isticmaal .table-responsivemiisaska si toosan u rogrogaya.

#	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka
1	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
2	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
3	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug

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

Burbur gaar ah

Isticmaal .table-responsive{-sm|-md|-lg|-xl|-xxl}hadba sida loogu baahdo si aad u abuurto jadwal jawaab celin ah ilaa meel goyn gaar ah. Laga bilaabo meeshaas jaban iyo kor, miisku si caadi ah ayuu u dhaqmi doonaa oo si siman uma rogrogmi doono.

Jaantusyadani waxa laga yaabaa inay u muuqdaan kuwo jaban ilaa qaababkooda ka jawaabaya lagu dabaqo ballaadhka muuqaalka gaarka ah.

#	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka
1	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
2	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
3	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug

#	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka
1	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
2	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
3	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug

#	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka
1	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
2	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
3	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug

#	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka
1	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
2	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
3	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug

#	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka
1	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
2	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
3	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug

#	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka	Ciwaanka
1	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
2	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug
3	Unug	Unug	Unug	Unug	Unug	Unug	Unug	Unug

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

Sass

Kala duwanaansho

$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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

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

$table-bg-scale:              -80%;

Loop

$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,
);

Habaynta

Doorsoomayaasha factor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) ayaa loo isticmaalaa si loo go'aamiyo kala duwanaanshaha shaxda.
Marka laga reebo noocyada miiska iftiinka & mugdiga ah, midabada mawduuca waxaa iftiiminaya $table-bg-scaledoorsoomayaasha.