ሓፈሻዊ ትሕዝቶ
ብሰንኪ ሰፊሕ ኣጠቓቕማ <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
ዝኾነ ዝያዳ ውህሉል ንምግባር ወስኹሉ ።.table
padding
#
መጀመርታ
መጨረሻ
ኣካይድ
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 , ንዘለዉ ኩሎም td
sን sን ዕላማ ክንገብር ስለዘድልየና ፡ መምረጺና ብዘይ ብእኡ ጽቡቕ ነዊሕ ምመሰለ። ከምኡ ስለዝኾነ፡ ንኹሉ sን sን ናይቲ , ግን ዋላ ሓደ ካብ ዝኾነ ክኸውን ዝኽእል ዝተሰነየ ሰደቓታት ንምዕላም፡ ነቲ ምናልባት ፍሉይ ዝመስል መምረጺ ንጥቀም ።th
thead
tbody
tfoot
.table > :not(caption) > * > *
td
th
.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 .table
with ብምጥቕላል .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 : .5 rem ;
$table-cell-padding-x : .5 rem ;
$table-cell-padding-y-sm : .25 rem ;
$table-cell-padding-x-sm : .25 rem ;
$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
ተለዋዋጢ ይበርሁ።