Source

ሰደቓታት

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

ኣብነታት

ብሰንኪ ሰፊሕ ኣጠቓቕማ ሰደቓታት ኣብ መላእ ሳልሳይ ወገን ዊጀት ከም ዓውደ-ኣዋርሕን ዕለት ምልቃምን፡ ሰደቓታትና ምርጫ-ኢን ክኾኑ ዲዛይን ጌርናዮም ኣለና ። Just the base class .tableto any <table>, ድሕሪኡ ብብሕታዊ ቅዲታት ወይ ዝተፈላለዩ ዝተሓወሱ መቐየሪ ክፍልታትና ኣስፍሕዎ።

እቲ ኣዝዩ መሰረታዊ ዝኾነ ናይ ሰደቓ ምልክት ብምጥቃም .table፡ ኣብ Bootstrap -based tables ከመይ ይመስሉ እንሆ። ኩሎም ቅዲታት ሰደቓ ኣብ Bootstrap 4 ይውረስ ፣ ማለት ዝኾነ ዝተሰነየ ሰደቓታት ብተመሳሳሊ ኣገባብ ከምቲ ወላዲ ቅዲ ክግበር እዩ።

# መጀመርታ መጨረሻ ኣካይድ
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ነቶም ሕብርታት እውን ክትገልብጦም ትኽእል ኢኻ-ብፍኹስ ዝበለ ጽሑፍ ኣብ ጸሊም ድሕረ ባይታ-ብ .table-dark.

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

ናይ ጠረጴዛ ርእሲ ኣማራጺታት

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

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

<table class="table">
  <thead class="thead-light">
    <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>

ስሪት ዘለዎም መስርዕ

.table-stripedኣብ ዝኾነ መስርዕ ሰደቓ ኣብ ውሽጢ ዜብራ-ስትሪፒንግ ንምውሳኽ ተጠቐም <tbody>።

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

ዶብ ዘለዎ ጠረጴዛ

.table-borderedንዶባት ኣብ ኩሉ ወገን ናይቲ ሰደቓን ዋህዮታትን ወስኸሉ ።

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

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

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

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

ንእሽቶ ጠረጴዛ

.table-smንዋህዮ መሸፈኒ ኣብ ክልተ ብምቑራጽ ጠረጴዛታት ዝያዳ ጽዑቓት ንኽኾኑ ወስኹሉ ።

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

<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-active">...</td>

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

ስሩዕ ናይ ሰደቓ ድሕረ ባይታ ፍልልያት ምስቲ ጸሊም ሰደቓ ኣይርከቡን እዮም፣ ይኹን እምበር፣ ተመሳሳሊ ቅዲታት ንምዕዋት ጽሑፍ ወይ ድሕረ ባይታ ውጽኢታት ክትጥቀም ትኽእል ኢኻ።

# ኣርእስቲ ኣርእስቲ
1. ዋህዮ ዋህዮ
2. ዋህዮ ዋህዮ
3. ዋህዮ ዋህዮ
4. ዋህዮ ዋህዮ
5. ዋህዮ ዋህዮ
6. ዋህዮ ዋህዮ
7. ዋህዮ ዋህዮ
8. ዋህዮ ዋህዮ
9. ዋህዮ ዋህዮ 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
ንሓገዝቲ ቴክኖሎጂታት ትርጉም ምትሕልላፍ

ትርጉም ንምውሳኽ ሕብሪ ምጥቃም ስእላዊ ምልክት ጥራይ እዩ ዝህብ፣ እዚ ድማ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ኣይመሓላለፍን እዩ። ብሕብሪ ዝተመልከተ ሓበሬታ ወይ ካብቲ ትሕዝቶ ባዕሉ ርኡይ ምዃኑ ኣረጋግጽ (ንኣብነት እቲ ዝርአ ጽሑፍ)፣ ወይ ድማ ብኣማራጺ ኣገባብ ከም ዝሕወስ ኣረጋግጽ፣ ከም ተወሳኺ ጽሑፍ ምስቲ .sr-onlyክፍሊ ዝተሓብአ።

.tableዝኾነ ምስ ብምጥቕላል ምላሽ ዝህቡ ሰደቓታት ፍጠር .table-responsive{-sm|-md|-lg|-xl}፣ እቲ ሰደቓ ኣብ ነፍሲ ወከፍ max-widthነጥቢ ምብታኽ ክሳብ (ግን ከይሓወሰ) ብቕደም ተኸተል ብኣግማድ ክሽክርከር ምግባር።

ኣስተውዕል ኣብዚ እዋን እዚ ዳህሰስቲ ን range context queries ስለዘይድግፉ ፣ ነዞም ንጽጽር ዝለዓለ ትኽክለኛነት ዘለዎም ክብርታት ብምጥቃም ንደረት min-ናይን max-ቅድመ-ጥብቆታትን ክፋላዊ ስፍሓት ዘለዎም ቪውፖርትን (ንኣብነት ኣብ ትሕቲ ዝተወሰነ ኩነ���ት ኣብ ልዑል-dpi መሳርሒታት ከጋጥም ዝኽእል) ንሰርሕ .

መግለጺ ጽሑፍ

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

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

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

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

ኩሉ ግዜ ምላሽ ዝህብ

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

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

ፍሉይ ነጥቢ ምብታኽ

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

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