Haala Waliigalaa
Sababa bal'inaan fayyadama <table>
elementoota wiijetoota qaama sadaffaa hunda keessatti akka kalaandarootaa fi fudhattoota guyyaa, gabateewwan Bootstrap's opt-in . Gitaa bu'uuraa .table
gara kamiyyuutti dabali <table>
, sana booda gita fooyyessaa filannoo keenyaa ykn akkaataa amala waliin dheeressi. 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 .table
gabateewwan -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
Koppii gochuu
< 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
Koppii gochuu
<!-- 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-hidden
gita waliin dhokatee.
Gabateewwan cimdii qaban
Tarreewwan sarara qaban
.table-striped
Tarree 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
Koppii gochuu
< 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
Koppii gochuu
< 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
Koppii gochuu
< table class = "table table-success table-striped" >
...
</ table >
Tarreewwan hoverable
.table-hover
Tarreewwan 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
Koppii gochuu
< 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
Koppii gochuu
< 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
Koppii gochuu
< table class = "table table-striped table-hover" >
...
</ table >
Gabateewwan sochii qaban
.table-active
Tarree 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
Koppii gochuu
< 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
Koppii gochuu
< 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-bg
Duubbee 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-bg
durtii hin saagamne, golgaa saanduqa durtii hin qabnu.
Yeroo yookaan .table-striped
, .table-hover
ykn .table-active
gitaawwan dabalaman, kan --bs-table-accent-bg
halluu walakkaa iftoomina qabuutti qindaa'a, duubbee halluu itti godhuuf.
Tokkoon tokkoo garaagarummaa gabateedhaaf, --bs-table-accent-bg
halluu sana irratti hundaa'uun halluu walfaallaa olaanaa qabu maddisiifna. Fakkeenyaaf, halluun aksentaa for .table-primary
dukkanaa'aa yoo ta'u .table-dark
halluu aksentaa salphaa qaba.
Halluuwwan barruu fi daangaa haala walfakkaatuun uumamu, halluuwwan isaaniis durtii dhaalamu.
Duubaan akkas fakkaata:
Koppii gochuu
@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-bordered
Daangaawwan 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
Koppii gochuu
< 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
Koppii gochuu
< table class = "table table-bordered border-primary" >
...
</ table >
Gabateewwan daangaa hin qabne
.table-borderless
Gabatee 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
Koppii gochuu
< 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
Koppii gochuu
< table class = "table table-dark table-borderless" >
...
</ table >
Minjaalota xixiqqoo
Seelii hunda walakkaatti muruun caalaatti kompaaktii .table-sm
gochuuf itti dabali ..table
padding
#
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
Koppii gochuu
< 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
Koppii gochuu
< 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.
Koppii gochuu
< 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
Koppii gochuu
< 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 td
s fi s hunda , , fi , th
keessatti 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.thead
tbody
tfoot
.table > :not(caption) > * > *
td
th
.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
Gabatee fi gabatee dukkanaa'aa wajjin wal fakkaata, gita fooyyessaa fayyadami .table-light
ykn s halluu diimaa ifaa ykn dukkanaa'aa akka mul'atu .table-dark
gochuuf .<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
Koppii gochuu
< 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
Koppii gochuu
< table class = "table" >
< thead class = "table-dark" >
...
</ 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
Jalqaba
Jalqaba
Jalqaba
Jalqaba
Koppii gochuu
< 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
Koppii gochuu
< 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
Koppii gochuu
< 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. .table
Gabatee 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}
.
Dhaabbataa ciccituu/ciccituu
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-responsive
gabateewwan 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
Koppii gochuu
< 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
Koppii gochuu
< 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
Koppii gochuu
$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 % ;
Furgaasuu
Koppii gochuu
$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-level
jijjiiramaatiin ifa ta'u.