Mwachidule
Chifukwa cha kufalikira kwa <table>
zinthu pama widget a chipani chachitatu monga makalendala ndi osankha masiku, matebulo a Bootstrap alowa . Onjezani kalasi yoyambira .table
ku iliyonse <table>
, kenaka wonjezerani ndi makalasi athu osintha kapena masitayelo anu. Masitayilo onse amatebulo samatengera ku Bootstrap, kutanthauza kuti matebulo aliwonse okhala ndi zisa amatha kulembedwa mosadalira kholo.
Pogwiritsa ntchito zolembera zoyambira kwambiri patebulo, nayi momwe .table
-matebulo amawonekera mu Bootstrap.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@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 >
Zosintha
Gwiritsani ntchito makalasi okhudzana ndi magome amitundu, mizere yamatebulo kapena ma cell amodzi.
Kalasi
Mutu
Mutu
Zosasintha
Selo
Selo
Pulayimale
Selo
Selo
Sekondale
Selo
Selo
Kupambana
Selo
Selo
Ngozi
Selo
Selo
Chenjezo
Selo
Selo
Zambiri
Selo
Selo
Kuwala
Selo
Selo
Chakuda
Selo
Selo
<!-- 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 >
Kupereka tanthauzo ku matekinoloje othandizira
Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .visually-hidden
kalasi.
Matebulo okoma
Mizere yamizeremizere
Gwiritsani .table-striped
ntchito kuwonjezera mbidzi-mizere pamzere uliwonse wa tebulo mkati mwa <tbody>
.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-striped" >
...
</ table >
Mizeremizeremizere
Gwiritsani .table-striped-columns
ntchito kuwonjezera mbidzi-mizere pa tebulo lililonse.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-striped-columns" >
...
</ table >
Makalasi awa atha kuwonjezedwa kumitundu yosiyanasiyana ya tebulo:
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-dark table-striped" >
...
</ table >
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-dark table-striped-columns" >
...
</ table >
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-success table-striped" >
...
</ table >
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-success table-striped-columns" >
...
</ table >
Mizere yosunthika
Onjezani .table-hover
kuti mutsegule chiwongolero pamizere ya tebulo mkati mwa <tbody>
.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-hover" >
...
</ table >
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-dark table-hover" >
...
</ table >
Mizere yosunthika iyi imathanso kuphatikizidwa ndi mizere yamizeremizere:
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-striped table-hover" >
...
</ table >
Matebulo achangu
Onetsani mzere wa tebulo kapena selo powonjezera .table-active
kalasi.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@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 >
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@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 >
Kodi mitundu ndi ma accented tables amagwira ntchito bwanji?
Pamatebulo omveka bwino ( mizere ya mizere , mizere ya mizere , mizere yosunthika , ndi matebulo ogwira ntchito ), tinagwiritsa ntchito njira zina kuti izi zigwire ntchito pamitundu yathu yonse ya tebulo :
Timayamba ndikuyika maziko a tebulo la tebulo ndi --bs-table-bg
katundu wamba. Zosintha zonse zamatebulo kenako zimayika zomwe mwamakonda kuti zisinthe ma cell a tebulo. Mwanjira iyi, sitikhala m'mavuto ngati mitundu yowoneka bwino imagwiritsidwa ntchito ngati maziko a tebulo.
Kenako timawonjezera mthunzi wa bokosi lamkati pamaselo a tebulo box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
ndikusanjikiza pamwamba pa chilichonse chomwe chatchulidwa background-color
. Chifukwa timagwiritsa ntchito kufalikira kwakukulu komanso kosasunthika, mtunduwo udzakhala monotone. Popeza --bs-table-accent-bg
sizinakhazikitsidwe mwachisawawa, tilibe mthunzi wa bokosi lokhazikika.
Zikawonjezedwa .table-striped
, .table-striped-columns
, .table-hover
kapena .table-active
makalasi, --bs-table-accent-bg
amayikidwa kuti akhale amtundu wowoneka bwino kuti azikongoletsa kumbuyo.
Pamtundu uliwonse wa tebulo, timapanga --bs-table-accent-bg
mtundu womwe umasiyana kwambiri malinga ndi mtunduwo. Mwachitsanzo, mtundu wa kamvekedwe kake .table-primary
ndi wakuda pomwe .table-dark
uli ndi mtundu wopepuka.
Mitundu ya malemba ndi malire amapangidwa mofanana, ndipo mitundu yawo imatengedwa mwachibadwa.
Kumbuyo kwa mawonekedwe zikuwoneka motere:
@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 ));
$border-color : mix ( $color , $background , percentage ( $table-border-factor ));
--#{$prefix}table-color : #{ $color } ;
--#{$prefix}table-bg : #{ $background } ;
--#{$prefix}table-border-color : #{ $border-color } ;
--#{$prefix}table-striped-bg : #{ $striped-bg } ;
--#{$prefix}table-striped-color : #{ color-contrast ( $striped-bg ) } ;
--#{$prefix}table-active-bg : #{ $active-bg } ;
--#{$prefix}table-active-color : #{ color-contrast ( $active-bg ) } ;
--#{$prefix}table-hover-bg : #{ $hover-bg } ;
--#{$prefix}table-hover-color : #{ color-contrast ( $hover-bg ) } ;
color : var ( -- #{ $prefix } table - color );
border-color : var ( -- #{ $prefix } table - border-color );
}
}
M'malire a tebulo
Matebulo okhala ndi malire
Onjezani .table-bordered
malire kumbali zonse za tebulo ndi ma cell.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-bordered" >
...
</ table >
Zida zamtundu wa malire zitha kuwonjezeredwa kuti zisinthe mitundu:
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-bordered border-primary" >
...
</ table >
Matebulo opanda malire
Onjezani .table-borderless
pa tebulo lopanda malire.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-borderless" >
...
</ table >
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-dark table-borderless" >
...
</ table >
Matebulo ang'onoang'ono
Onjezani .table-sm
kuti mupange .table
chophatikizana podula ma cell onse padding
pakati.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-sm" >
...
</ table >
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-dark table-sm" >
...
</ table >
Ogawa magulu a tebulo
Onjezani malire okhuthala, akuda pakati pa magulu a tebulo— <thead>
, <tbody>
, ndi <tfoot>
-ndi .table-group-divider
. Sinthani mtunduwo mwakusintha border-top-color
(omwe pakadali pano sitikupereka gulu lothandizira pakali pano).
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@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 class = "table-group-divider" >
< 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 >
Kuyanjanitsa koyima
Maselo a tebulo <thead>
nthawi zonse amakhala ofukula pansi. Maselo <tbody>
amndandanda <table>
amatengera kutengera kwawo ndipo amalumikizidwa kumtunda mwachisawawa. Gwiritsani ntchito makalasi oyimirira kuti muyanjanitsenso ngati pakufunika.
Mutu 1
Mutu 2
Mutu 3
Mutu 4
Selo iyi imatenga cholowa vertical-align: middle;
kuchokera patebulo
Selo iyi imatenga cholowa vertical-align: middle;
kuchokera patebulo
Selo iyi imatenga cholowa vertical-align: middle;
kuchokera patebulo
Awa ndi mawu ogwirizira malo, olinganizidwa kuti atenge danga loyima pang'ono, kuti awonetse momwe kusanja koyimirira kumagwirira ntchito m'maselo am'mbuyomo.
Selo iyi imatenga vertical-align: bottom;
kuchokera pamzere wa tebulo
Selo iyi imatenga vertical-align: bottom;
kuchokera pamzere wa tebulo
Selo iyi imatenga vertical-align: bottom;
kuchokera pamzere wa tebulo
Awa ndi mawu ogwirizira malo, olinganizidwa kuti atenge danga loyima pang'ono, kuti awonetse momwe kusanja koyimirira kumagwirira ntchito m'maselo am'mbuyomo.
Selo iyi imatenga cholowa vertical-align: middle;
kuchokera patebulo
Selo iyi imatenga cholowa vertical-align: middle;
kuchokera patebulo
Selo iyi imalumikizidwa pamwamba.
Awa ndi mawu ogwirizira malo, olinganizidwa kuti atenge danga loyima pang'ono, kuti awonetse momwe kusanja koyimirira kumagwirira ntchito m'maselo am'mbuyomo.
< 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 >
Nesting
Masitayelo am'malire, masitayelo omwe akugwira ntchito, ndi masitaelo amitundu sizitengera matebulo okhala.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
Mutu
Mutu
Mutu
A
Choyamba
Pomaliza
B
Choyamba
Pomaliza
C
Choyamba
Pomaliza
3
Larry
Mbalame
@twitter
< table class = "table table-striped" >
< thead >
...
</ thead >
< tbody >
...
< tr >
< td colspan = "4" >
< table class = "table mb-0" >
...
</ table >
</ td >
</ tr >
...
</ tbody >
</ table >
Momwe zisa zimagwirira ntchito
Kuti tipewe masitayelo aliwonse kuti asadutse kumatebulo omwe ali mu zisa, timagwiritsa ntchito >
chosankha cha ana ( ) mu CSS yathu. Popeza tiyenera kulunjika ma td
s ndi th
s onse mu thead
, tbody
, ndi tfoot
, osankhidwa athu angawoneke motalika kwambiri popanda izo. .table > :not(caption) > * > *
Mwakutero, timagwiritsa ntchito chosankha chowoneka modabwitsa kuti tiyang'ane ma td
s ndi ma th
s .table
, koma palibe matebulo aliwonse omwe angakhalepo.
Zindikirani kuti ngati muwonjezera <tr>
s monga ana achindunji a tebulo, iwo <tr>
adzakulungidwa <tbody>
mwachisawawa, motero kupangitsa osankhidwa athu kugwira ntchito monga momwe amafunira.
Anatomy
Mutu wa tebulo
Mofanana ndi matebulo ndi matebulo akuda, gwiritsani ntchito makalasi osintha .table-light
kapena .table-dark
kupanga <thead>
s kuwoneka yopepuka kapena imvi.
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
Mbalame
@twitter
< table class = "table" >
< thead class = "table-light" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
Mbalame
@twitter
< table class = "table" >
< thead class = "table-dark" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
Mbalame
@twitter
M'munsi
M'munsi
M'munsi
M'munsi
< table class = "table" >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
< tfoot >
...
</ tfoot >
</ table >
Mawu omasulira
A <caption>
amagwira ntchito ngati mutu wa tebulo. Zimathandizira ogwiritsa ntchito omwe ali ndi zowonera kuti apeze tebulo ndikumvetsetsa zomwe akunena ndikusankha ngati akufuna kuliwerenga.
Mndandanda wa ogwiritsa ntchito
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry Mbalame
@twitter
< table class = "table table-sm" >
< caption > List of users</ caption >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
Mukhozanso kuika <caption>
pamwamba pa tebulo ndi .caption-top
.
Mndandanda wa ogwiritsa ntchito
#
Choyamba
Pomaliza
Chogwirizira
1
Mark
Otto
@mdo
2
Yakobo
Thornton
@mafuta
3
Larry
Mbalame
@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 >
Matebulo omvera
Matebulo omvera amalola kuti matebulo azipukutidwa mopingasa mosavuta. Pangani tebulo lililonse kuti liziyankha pamawonekedwe onse pokulunga .table
ndi .table-responsive
. Kapena, sankhani malo odumpha kwambiri omwe mungakhale ndi tebulo lomvera mpaka kugwiritsa ntchito .table-responsive{-sm|-md|-lg|-xl|-xxl}
.
Kudula molunjika/kudulira
Matebulo omvera amagwiritsa ntchito overflow-y: hidden
, yomwe imadula chilichonse chomwe chimadutsa pansi kapena m'mphepete mwa tebulo. Makamaka, izi zitha kudulira mindandanda yotsitsa ndi ma widget ena a chipani chachitatu.
Nthawi zonse amayankha
Pamalo oduka aliwonse, gwiritsani ntchito .table-responsive
magome oyenda mopingasa.
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
< div class = "table-responsive" >
< table class = "table" >
...
</ table >
</ div >
Breakpoint mwachindunji
Gwiritsani ntchito .table-responsive{-sm|-md|-lg|-xl|-xxl}
ngati pakufunika kuti mupange matebulo omvera mpaka pagawo linalake. Kuyambira pomwepa ndikupita mmwamba, tebulo liziyenda bwino osati kusuntha mopingasa.
Matebulowa atha kuwoneka osweka mpaka masitayilo awo amayankhidwa atagwiritsidwa ntchito pamawonekedwe enaake.
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
#
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
Mutu
1
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
2
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
3
Selo
Selo
Selo
Selo
Selo
Selo
Selo
Selo
< 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
Zosintha
$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 : var ( -- #{ $prefix } 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 : var ( -- #{ $prefix } border-color );
$table-striped-order : odd ;
$table-striped-columns-order : even ;
$table-group-separator-color : currentcolor ;
$table-caption-color : $text-muted ;
$table-bg-scale : - 80 % ;
Lupu
$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 ,
);
Kusintha mwamakonda
Mafactor variables ( $table-striped-bg-factor
, $table-active-bg-factor
& $table-hover-bg-factor
) amagwiritsidwa ntchito kuti adziwe kusiyana kwa ma tebulo.
Kupatula pamitundu yowala & yakuda, mitundu yamutu imawunikiridwa ndi $table-bg-scale
kusinthika.