Тойм
Хуанли, огноо сонгогч зэрэг гуравдагч этгээдийн виджетүүдэд элементүүдийг өргөнөөр ашигладаг тул <table>
Bootstrap-ийн хүснэгтүүдийг ашиглах боломжтой. Үндсэн ангийг .table
дурын <table>
-д нэмээд дараа нь манай нэмэлт өөрчлөх анги эсвэл өөрчлөн хэв маягаар өргөтгөнө. Бүх хүснэгтийн хэв маяг нь Bootstrap-д өвлөгддөггүй бөгөөд энэ нь ямар ч үүрлэсэн хүснэгтийг эцэг эхээс хамааралгүйгээр загварчлах боломжтой гэсэн үг юм.
Хамгийн энгийн хүснэгтийн тэмдэглэгээг ашиглан .table
Bootstrap дээр суурилсан хүснэгтүүд хэрхэн харагдахыг эндээс үзнэ үү.
#
Эхлээд
Сүүлийн
Бариул
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
Толгой хэсэг
Толгой хэсэг
Толгой хэсэг
А
Эхлээд
Сүүлийн
Б
Эхлээд
Сүүлийн
C
Эхлээд
Сүүлийн
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-д хүүхдийн нэгтгэгч ( ) сонгогчийг ашигладаг. Бид , , болон доторх бүх td
s ба th
s- г чиглүүлэх шаардлагатай тул үүнгүйгээр сонгогч маань нэлээд урт харагдах болно. Иймээс бид бүх s болон s- д чиглүүлэхийн тулд нэлээд хачирхалтай харагдах сонгогчийг ашигладагthead
tbody
tfoot
.table > :not(caption) > * > *
td
th
.table
д чиглүүлэхийн тулд ашигладаг , гэхдээ ямар ч боломжит үүрлэсэн хүснэгтүүдийн аль нь ч биш.
Хэрэв та <tr>
хүснэгтийн шууд хүүхэд гэж s-г нэмбэл тэдгээр нь анхдагчаар <tr>
a -д ороогдон сонгогчид маань зориулалтын дагуу ажиллах болно гэдгийг анхаарна уу.<tbody>
Анатоми
Ширээний толгой
Хүснэгт болон бараан хүснэгттэй адилаар s-г цайвар эсвэл хар саарал харагдуулахын тулд өөрчлөх ангиудыг .table-light
ашиглана уу .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 >
Тайлбар
Хүснэгтийн <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 >
Хариуцлагатай хүснэгтүүд
Хариуцлагатай хүснэгтүүд нь хүснэгтийг хэвтээ байдлаар хялбархан гүйлгэх боломжийг олгодог. -аар боож, бүх харах цонхонд дурын хүснэгтийг хариу үйлдэл үзүүлэх .table
боломжтой .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
) ашигладаг.
Цайвар, бараан ширээний хувилбаруудаас гадна сэдэвчилсэн өнгийг $table-bg-level
хувьсагчаар гэрэлтүүлдэг.