ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
in English

ሰደቓታት

ሰነዳትን ኣብነታትን ናይ ምምራጽ ቅዲ ሰደቓታት (ኣብ ጃቫስክሪፕት ፕላጊናት ዘለዎም ስፍሕ ዝበለ ኣጠቓቕማ ኣብ ግምት ብምእታው) ምስ ቡትስትራፕ።

ኣብዚ ገጽ

ሓፈሻዊ ትሕዝቶ

ብሰንኪ ሰፊሕ ኣጠቓቕማ <table>ባእታታት ኣብ መላእ ሳልሳይ ወገን ዊጀት ከም ዓውደ-ኣዋርሕን ዕለት ምልቃምን፡ ናይ ቡትስትራፕ ሰደቓታት opt-in እዮም ። ነቲ መሰረታዊ ክፍሊ .tableናብ ዝኾነ ወስኸሉ <table>፣ ድሕሪኡ ብናይ ኣማራጺ መቐየሪ ክፍልታትና ወይ ብሕታዊ ቅዲታትና ኣስፍሕዎ። ኩሎም ቅዲታት ሰደቓ ኣብ ቡትስትራፕ ኣይውረሱን እዮም፣ ማለት ዝኾነ ዝተሰነየ ሰደቓታት ካብ ወላዲ ነጻ ኮይኑ ቅዲ ክግበር ይኽእል።

እቲ ኣዝዩ መሰረታዊ ዝኾነ ናይ ሰደቓ ምልክት ብምጥቃም .table፡ ኣብ Bootstrap -based tables ከመይ ይመስሉ እንሆ።

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @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>።

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-striped">
  ...
</table>

እዞም ክፍልታት ኣብ ፍልልያት ሰደቓ እውን ክውሰኹ ይኽእሉ እዮም፤

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-dark table-striped">
  ...
</table>
# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-success table-striped">
  ...
</table>

ዝንቀሳቐሱ መስመራት።

ኣብ ውሽጢ .table-hoverሓደ <tbody>.

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-hover">
  ...
</table>
# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-dark table-hover">
  ...
</table>

እዞም ዝንሳፈፉ መስመራት ምስቲ ስሪት ዘለዎ ፍልልይ እውን ክውሃሃዱ ይኽእሉ እዮም፤

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-striped table-hover">
  ...
</table>

ንጡፋት ሰደቓታት

ንሓደ መስርዕ ሰደቓ ወይ ዋህዮ ክፍሊ ብምውሳኽ .table-activeኣጉልሖ።

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @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>
# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @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);ድሕሪኡ ኣብ ልዕሊ ዝኾነ ዝተገልጸ ናብ ንጣር ዘለዎ ኣብ ሰንጠረዥ ዋህዮታት ጽላሎት ውሽጢ ሳጹን ንውስኽ background-color። ምኽንያቱ ዓቢ ዝርግሐ ስለንጥቀምን ድብዝዝ የብሉን፡ እቲ ሕብሪ ሞኖቶን ክኸውን እዩ። --bs-table-accent-bgብነባሪ ዘይተሰርዐ ስለ ዝኾነ፡ ነባሪ ሳጹን ጽላሎት የብልናን።
  • ወይ .table-striped፣ .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ንዶባት ኣብ ኩሉ ወገን ናይቲ ሰደቓን ዋህዮታትን ወስኸሉ ።

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-bordered">
  ...
</table>

ሕብርታት ንምቕያር ናይ ዶብ ሕብሪ ዩቲሊቲታት ክውሰኹ ይኽእሉ እዮም፤

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-bordered border-primary">
  ...
</table>

ዶብ ዘይብሎም ጠረጴዛታት

.table-borderlessንዶብ ዘይብሉ ሰደቓ ወስኹሉ ።

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-borderless">
  ...
</table>
# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-dark table-borderless">
  ...
</table>

ንኣሽቱ ጠረጴዛታት

ንኹሉ ዋህዮ ኣብ ክልተ ብምቑራጽ .table-smዝኾነ ዝያዳ ውህሉል ንምግባር ወስኹሉ ።.tablepadding

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-sm">
  ...
</table>
# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-dark table-sm">
  ...
</table>

ቀጥታዊ ኣሰላልፋ

ዋህዮታት ሰደቓ ናይ <thead>ኩሉ ግዜ ቀጥ ኢሎም ናብ ታሕቲ ተሰሪዖም ኣለዉ። ዋህዮታት ሰደቓ ኣብ <tbody>ኣሰላልፋኦም ካብ <table>ይወርሱን ብነባሪ ናብቲ ላዕለዋይ ይስለፉን። ኣብ ዘድልየሉ ቦታ ዳግማይ ንምስላፍ ነቶም ቀጥታዊ ኣሰላልፋ ክፍልታት ተጠቐም ።

ርእሲ 1 ርእሲ 2 ርእሲ 3 ርእሲ 4
እዚ ዋህዮ 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>

ምድቃል

ቅዲታት ዶብ፣ ንጡፋት ቅዲታትን ፍልልያት ሰደቓን ብዝተሰፈሩ ሰደቓታት ኣይውረስን እዩ።

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
ርእሲ ጽሑፍ ርእሲ ጽሑፍ ርእሲ ጽሑፍ
ሓደ መጀመርታ መጨረሻ
ለ መጀመርታ መጨረሻ
ሐ መጀመርታ መጨረሻ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

ምድቃል ከመይ ይሰርሕ

ዝኾነ ቅዲታት ናብ ዝተሰፍሩ ሰደቓታት ከይፈስስ >፡ ኣብ CSSና ናይ ውላድ ውህደት ( ) መምረጺ ንጥቀም። ኣብ , , and , ንዘለዉ ኩሎም tdsን sን ዕላማ ክንገብር ስለዘድልየና ፡ መምረጺና ብዘይ ብእኡ ጽቡቕ ነዊሕ ምመሰለ። ከምኡ ስለዝኾነ፡ ንኹሉ sን sን ናይቲ , ግን ዋላ ሓደ ካብ ዝኾነ ክኸውን ዝኽእል ዝተሰነየ ሰደቓታት ንምዕላም፡ ነቲ ምናልባት ፍሉይ ዝመስል መምረጺ ንጥቀም ።ththeadtbodytfoot.table > :not(caption) > * > *tdth.table

ኣስተውዕል <tr>s ከም ቀጥታዊ ውሉድ ናይ ሓደ ሰደቓ እንተ ወሲኽካዮም፡ እቶም ብነባሪ ብ <tr>a ክጥቕለሉ እዮም ፡ በዚ ድማ መምረጺታትና ከምቲ ዝተሓሰበሉ ክሰርሑ ይገብሩ።<tbody>

ኣናቶሚ

ርእሲ ጠረጴዛ

ምስ ሰደቓታትን ጸሊም ሰደቓታትን ዝመሳሰል፡ ናይ መቐየሪ ክፍልታት ተጠቐም .table-lightወይ s ፍኹስ ዝበለ ወይ ጸሊም ግራጭ ንኽመስል .table-darkምግባር ።<thead>

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

ናይ ጠረጴዛ እግሪ

# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ።
እግረ ጽሑፍ እግረ ጽሑፍ እግረ ጽሑፍ እግረ ጽሑፍ 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

መግለጺ ጽሑፍ

A <caption>ከም ርእሲ ሰደቓ ኮይኑ ይሰርሕ። ስክሪን ሪደር ዘለዎም ተጠቀምቲ ሰደቓ ንኽረኽቡን ብዛዕባ እንታይ ምዃኑ ንኽርድኡን ከንብብዎ እንተደልዮም ንኽውስኑን ይሕግዞም።

ዝርዝር ተጠቀምቲ
# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

ብተወሳኺ <caption>ኣብ ላዕሊ ናይቲ ጠረጴዛ ብ .caption-top.

ዝርዝር ተጠቀምቲ
# መጀመርታ መጨረሻ ኣካይድ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @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>

ምላሽ ዝህቡ ሰደቓታት

ምላሽ ዝህቡ ሰደቓታት ሰደቓታት ብቐሊሉ ብኣግማድ ንኽንቀሳቐሱ የኽእ���። ዝኾነ ሰደቓ ኣብ ኩሉ ቪውፖርትታት ምላሽ ዝህብ ግበሮ a .tablewith ብምጥቕላል .table-responsive። ወይ ድማ፡ ብመገዲ ምላሽ ዝህብ ሰደቓ ክሳብ ዝህልወካ ዝለዓለ ናይ ምብታኽ ነጥቢ ምረጽ .table-responsive{-sm|-md|-lg|-xl|-xxl}።

ቀጥ ዝበለ ምቑራጽ/ምቑራጽ

ምላሽ ዝህቡ ሰደቓታት ን , ይጥቀሙ overflow-y: hidden፣ እዚ ድማ ንዝኾነ ካብ ታሕተዋይ ወይ ላዕለዋይ ወሰናት ናይቲ ሰደቓ ዝሓልፍ ትሕዝቶ ይቖርጾ። ብፍላይ እዚ ንቑልቁል ዝወርድ ምልክታታትን ካልኦት ናይ ሳልሳይ ወገን ዊጀታትን ክቖርጾም ይኽእል።

ኩሉ ግዜ ምላሽ ዝህብ

ኣብ ነፍሲ ወከፍ ነጥቢ ምብታኽ .table-responsive፡ ንኣግማድ ምዝዋር ሰደቓታት ተጠቐም።

# ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ
1. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
2. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
3. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ፍሉይ ነጥቢ ምብታኽ

.table-responsive{-sm|-md|-lg|-xl|-xxl}ክሳብ ሓደ ፍሉይ ነጥቢ ምብታኽ ምላሽ ዝህቡ ሰደቓታት ንምፍጣር ከም ኣድላይነቱ ተጠቐም ። ካብቲ ምብታኽን ንላዕሊን፡ እቲ ሰደቓ ብንቡር ባህሪ ክህልዎ እምበር ብኣግማድ ኣይክሽክርከርን እዩ።

እዞም ሰደቓታት እዚኦም ምላሽ ዝህቡ ቅዲታቶም ኣብ ፍሉይ ስፍሓት ቪውፖርት ክሳብ ዝትግበሩ ዝተሰብሩ ክመስሉ ይኽእሉ።

# ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ
1. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
2. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
3. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
# ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ
1. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
2. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
3. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
# ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ
1. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
2. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
3. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
# ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ
1. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
2. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
3. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
# ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ
1. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
2. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
3. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
# ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ ኣርእስቲ
1. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
2. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ
3. ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ ዋህዮ 
<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,
);

ምምዕርራይ ምግባር

  • እቶም ረቛሒ ተለዋዋጢ ረቛሒታት ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) ኣብ ፍልልያት ሰደቓ ንዘሎ ንጽጽር ንምፍላጥ ይጥቀሙ።
  • ብዘይካ እቶም light & dark table variants፡ ቴማ ሕብርታት በቲ $table-bg-levelተለዋዋጢ ይበርሁ።