Gabateewwan

Galmee fi fakkeenyota akkaataa filannoo gabatee (fayyadama isaanii babal'ataa pilaagiinii JaavaScript keessatti kennameef) Bootstrap waliin.

Fuula kana irratti

Haala Waliigalaa

Sababa bal'inaan fayyadama <table>elementoota wiijetoota qaama sadaffaa akka kalaandarootaa fi fudhattoota guyyaa hunda keessatti, gabateewwan Bootstrap's opt-in . Gitaa bu'uuraa .tablegara kamiyyuutti dabali <table>, sana booda gita fooyyessaa filannoo keenyaa ykn akkaataa amala waliin bal'isi. Akkaataan gabatee hundi Bootstrap keessatti hin dhaalan, jechuunis gabatee man'ee kamiyyuu warra irraa walaba ta'ee akkaataan taasifamuu danda'a.

Mallattoo gabatee hunda caalaa bu'uuraa fayyadamuun, kunoo akkaataa .tablegabateewwan -bu'uura godhatan Bootstrap keessatti mul'atu.

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Garaagarummaa

Gabateewwan, tarreewwan gabatee ykn man'eewwan dhuunfaa halluu itti gochuuf gitawwan yaadannoo fayyadami.

Kutaa	Mata duree	Mata duree
Durtii dha	Seelii	Seelii
Sadarkaa tokkoffaa	Seelii	Seelii
Sadarkaa lammaffaa	Seelii	Seelii
Milkaa'ina	Seelii	Seelii
Hamaa	Seelii	Seelii
Akeekkachiisa	Seelii	Seelii
Info	Seelii	Seelii
Ifa	Seelii	Seelii
Duukkana	Seelii	Seelii

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

Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .visually-hiddengita waliin dhokatee.

Gabateewwan cimdii qaban

Tarreewwan sarara qaban

.table-stripedTarree gabatee kamiyyuu keessaa zebra-striping dabaluudhaaf fayyadami <tbody>.

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Gitoota kun garaagarummaa gabatee irrattis dabalamuu danda'u:

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Tarreewwan hoverable

.table-hoverTarreewwan gabatee irratti haalata hover dandeessisuuf dabali <tbody>.

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Tarreewwan hoverable kunniin akkasumas garaagarummaa sarara qabu waliin walitti makamuu danda'u:

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Gabateewwan sochii qaban

.table-activeTarree gabatee ykn man'ee gita dabaluudhaan calaqqisiisi .

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Garaagarummaan fi gabateewwan cimdii qaban akkamitti hojjetu?

Gabateewwan cimdii qabaniif ( tarreewwan sarara qaban , tarreewwan hoverable , fi gabateewwan sochii qaban ), bu'aawwan kun garaagarummaa gabatee keenya hundaaf akka hojjetan gochuuf tooftaalee tokko tokko fayyadamne :

--bs-table-bgDuubbee man'ee gabatee qabeentaa amala waliin saaguudhaan jalqabna . Sana booda garaagarummaa gabatee hunduu man'eelee gabatee halluu itti kennuuf qabeentaa amala sana saagi. Haala kanaan, halluuwwan walakkaa iftoomina qaban akka duubbee gabatee yoo fayyadaman rakkina keessa hin galle.
Sana booda gaaddidduu saanduqa galtee man'ee gabatee irratti box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer waliin ifteessame kamiyyuu gubbaatti daballa background-color. Sababni isaas babal'ina guddaa fi jajjabina hin qabne fayyadamna, halluun monotone ta'a. Erga --bs-table-accent-bgdurtii hin saagamne, golgaa saanduqa durtii hin qabnu.
Yeroo yookaan .table-striped, .table-hoverykn .table-activegitaawwan dabalaman, kan --bs-table-accent-bghalluu walakkaa iftoomina qabuutti qindaa'a, duubbee halluu itti godhuuf.
Tokkoon tokkoo garaagarummaa gabateedhaaf, --bs-table-accent-bghalluu sana irratti hundaa'uun halluu walfaallaa olaanaa qabu uumna. Fakkeenyaaf, halluun aksentaa for .table-primarydukkanaa'aa yoo ta'u .table-darkhalluu aksentaa salphaa qaba.
Halluuwwan barruu fi daangaa haala walfakkaatuun uumamu, halluuwwan isaaniis durtii dhaalamu.

Duubaan akkas fakkaata:

@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));
  }
}

Daangaawwan gabatee

Gabateewwan daangaa qaban

.table-borderedDaangaawwan gama hundaan gabatee fi man'eewwaniif dabali .

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Faayidaaleen halluu daangaa halluu jijjiiruuf dabalamuu danda'u:

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Gabateewwan daangaa hin qabne

.table-borderlessGabatee daangaa hin qabneef dabali .

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Minjaalota xixiqqoo

Seelii hunda walakkaatti muruun caalaatti kompaaktii .table-smgochuuf itti dabali ..tablepadding

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Hiriirsuu dhaabbataa

Man'eewwan gabatee <thead>kan yeroo hunda gara jalaatti dhaabbataadhaan qindaa'u. Man'eewwan gabatee keessa <tbody>jiran qindaa'ina isaanii irraa dhaalu <table>fi durtiidhaan gara gubbaatti qindaa'u. Bakka barbaachisaa ta'etti irra deebi'ii qindeessuuf gitaalee hiriirsa dhaabbataa fayyadami .

Mata duree 1.	Mata duree 2.	Mata duree 3.	Mata duree 4.
Man'een kun `vertical-align: middle;`gabatee irraa dhaala	Man'een kun `vertical-align: middle;`gabatee irraa dhaala	Man'een kun `vertical-align: middle;`gabatee irraa dhaala	Kun asitti barruu iddooqa tokko tokkoo, iddoo dhaabbataa baay'ee fudhachuuf yaadame, akkaataa qindaa'inni dhaabbataa man'eelee duraa keessatti hojjetu agarsiisuuf.
Man'een kun `vertical-align: bottom;`tarree gabatee irraa dhaala	Man'een kun `vertical-align: bottom;`tarree gabatee irraa dhaala	Man'een kun `vertical-align: bottom;`tarree gabatee irraa dhaala	Kun asitti barruu iddooqa tokko tokkoo, iddoo dhaabbataa baay'ee fudhachuuf yaadame, akkaataa qindaa'inni dhaabbataa man'eelee duraa keessatti hojjetu agarsiisuuf.
Man'een kun `vertical-align: middle;`gabatee irraa dhaala	Man'een kun `vertical-align: middle;`gabatee irraa dhaala	Man'een kun gara gubbaatti qindaa'a.	Kun asitti barruu iddooqa tokko tokkoo, iddoo dhaabbataa baay'ee fudhachuuf yaadame, akkaataa qindaa'inni dhaabbataa man'eelee duraa keessatti hojjetu agarsiisuuf.

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

Koonyaa gochuu

Akkaataawwan daangaa, akkaataawwan socho'oo, fi garaagarummaa gabatee gabatee man'eetiin hin dhaalan.

Jalqaba

Isa dhumaa

Harkatti qabuu

1. 1.

Maarqos

Otto

@mdo jedhaa

Mata duree	Mata duree	Mata duree
QEENXEE	Jalqaba	Isa dhumaa
B.	Jalqaba	Isa dhumaa
C. C. Afaan Oromoo	Jalqaba	Isa dhumaa

3. 3.

Laarii

kan jedhu Simbirroo

@twitter irratti argattu

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

Akkaataa nesting itti hojjetu

Akkaataawwan kamiyyuu gara gabatee man'eetti akka hin dhangalaane ittisuuf , >CSS keenya keessatti filannoo walnyaatinsa mucaa ( ) fayyadamna . Erga tds fi s hunda , , fi , thkeessatti xiyyeeffachuu qabna, filannoon keenya osoo isa hin jiraatin baay'ee dheeraa fakkaata ture. Akka kanaan, filannoo baay'ee odd fakkaatu fayyadamnee s fi s hunda kan , garuu gabatee man'ee ta'uu danda'u kamiyyuu irratti xiyyeeffachuuf.theadtbodytfoot.table > :not(caption) > * > *tdth.table

Hubadhu yoo <tr>s akka ijoollee kallatti gabatee tokkootti dabalte, warri durtii <tr>a keessatti ni <tbody>marfamu, kanaanis filattoonni keenya akka yaadametti akka hojjetan taasisa.

Anaatoomii

Mataa minjaalaa

Gabateewwanii fi gabateewwan dukkanaa'oo wajjin wal fakkaatu, gitawwan fooyyessaa fayyadami .table-lightykn s halluu diimaa ifaa ykn dukkanaa'aa akka mul'atu .table-darkgochuuf .<thead>

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii	kan jedhu Simbirroo	@twitter irratti argattu

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

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii	kan jedhu Simbirroo	@twitter irratti argattu

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

Miila minjaalaa

#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii	kan jedhu Simbirroo	@twitter irratti argattu
Jalqaba	Jalqaba	Jalqaba	Jalqaba

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

Barreeffamoota barreeffamaa

A <caption>akka mataduree gabatee tokkootti hojjeta. Fayyadamtoonni dubbistoota iskiriinii qaban gabatee akka argatanii fi waa'ee isaa maal akka ta'e hubatanii dubbisuu yoo barbaadan akka murteessan gargaara.

Tarree fayyadamtootaa
#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii Simbirroo		@twitter irratti argattu

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

Akkasumas <caption>gubbaa gabatee irratti kan .caption-top.

Tarree fayyadamtootaa
#	Jalqaba	Isa dhumaa	Harkatti qabuu
1. 1.	Maarqos	Otto	@mdo jedhaa
2. 2.	Yaaqoob	Thornton jedhamuun beekama	@furdaa
3. 3.	Laarii	kan jedhu Simbirroo	@twitter irratti argattu

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

Gabateewwan deebii kennan

Gabateewwan deebii kennan gabateewwan salphaatti akka qajeelaan akka qaxxaamuran hayyamu. .tableGabatee kamiyyuu deebii akka kennu godhi a with marchuudhaan .table-responsive. Yookiin, qabxii cabbii guddaa kan gabatee deebii kennuu hanga ittiin qabaattu fayyadamuun filadhu .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Ciccituu/ciccituu dhaabbataa

Gabateewwan deebii kennan overflow-y: hidden, kan qabiyyee kamiyyuu kan qarqara jalaa ykn gubbaa gabatee bira darbee deemu fayyadamu fayyadamu. Keessattuu, kun menu gadi bu'aa fi wiijetoota qaama sadaffaa biroo irraa cicciruu danda'a.

Yeroo hundumaa deebii kan kennu

Qabxii cabsuu hunda qaxxaamuree, .table-responsivegabateewwan qajeelaan garagalchuuf fayyadami.

#	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree
1. 1.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
2. 2.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
3. 3.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii

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

Breakpoint adda ta'e

.table-responsive{-sm|-md|-lg|-xl|-xxl}Gabateewwan deebii kennanii hanga qabxii cabbii murtaa'etti uumuuf akka barbaachisummaa isaatti fayyadami . Qabxii cabbii sana irraa fi ol, gabatee akka idileetti amala qabaata malee gara qajeelaa hin tarkaanfatu.

Gabateewwan kun hanga akkaataan deebii isaanii bal'ina buufata ilaalchaa murtaa'e irratti hojiirra oolutti cabee mul'achuu danda'u.

#	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree
1. 1.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
2. 2.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
3. 3.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii

#	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree
1. 1.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
2. 2.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
3. 3.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii

#	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree
1. 1.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
2. 2.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
3. 3.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii

#	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree
1. 1.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
2. 2.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
3. 3.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii

#	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree
1. 1.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
2. 2.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
3. 3.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii

#	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree	Mata duree
1. 1.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
2. 2.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii
3. 3.	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii	Seelii

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

Jijjiiramoota

$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%;

Furgaasuu

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

Dhuunfachiisuu

Jijjiiramoonni factor ( $table-striped-bg-factor, .$table-active-bg-factor & $table-hover-bg-factor) garaagarummaa gabatee keessatti walfaallaa murteessuuf fayyadamu.
Garaagarummaa gabatee ifaa & dukkanaa'aa irraa kan hafe, halluuwwan mata duree $table-bg-leveljijjiiramaatiin ifa ta'u.