Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Gabateewwan

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

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.