ພາບລວມ
ເນື່ອງຈາກການນໍາໃຊ້ <table>
ອົງປະກອບຢ່າງກວ້າງຂວາງໃນທົ່ວ widget ພາກສ່ວນທີສາມເຊັ່ນ: ປະຕິທິນແລະການເລືອກວັນທີ, ຕາຕະລາງຂອງ Bootstrap ແມ່ນ ເລືອກເຂົ້າ . ເພີ່ມຊັ້ນພື້ນຖານ .table
ໃສ່ອັນໃດກໍ <table>
ໄດ້, ຈາກນັ້ນຂະຫຍາຍດ້ວຍຫ້ອງຮຽນຕົວແກ້ໄຂທາງເລືອກຂອງພວກເຮົາ ຫຼືຮູບແບບທີ່ກຳນົດເອງ. ຮູບແບບຕາຕະລາງທັງໝົດບໍ່ໄດ້ຖືກສືບທອດໃນ Bootstrap, ຊຶ່ງຫມາຍຄວາມວ່າຕາຕະລາງທີ່ຕິດກັນສາມາດຈັດຮູບແບບເປັນເອກະລາດຈາກພໍ່ແມ່ໄດ້.
ການນໍາໃຊ້ເຄື່ອງຫມາຍຕາຕະລາງພື້ນຖານທີ່ສຸດ, ນີ້ແມ່ນວິທີການ .table
ຕາຕະລາງ -based ເບິ່ງໃນ Bootstrap.
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@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
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-striped" >
...
</ table >
ຫ້ອງຮຽນເຫຼົ່ານີ້ຍັງສາມາດຖືກເພີ່ມໃສ່ຕົວແປຕາຕະລາງ:
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-dark table-striped" >
...
</ table >
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-success table-striped" >
...
</ table >
ແຖວທີ່ເລື່ອນໄດ້
ເພີ່ມ .table-hover
ເພື່ອເປີດໃຊ້ສະຖານະ hover ໃນແຖວຕາຕະລາງພາຍໃນ <tbody>
.
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-hover" >
...
</ table >
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-dark table-hover" >
...
</ table >
ແຖວທີ່ເລື່ອນໄດ້ເຫຼົ່ານີ້ຍັງສາມາດຖືກລວມເຂົ້າກັບຕົວແປທີ່ມີເສັ້ນດ່າງ:
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-striped table-hover" >
...
</ table >
ຕາຕະລາງເຄື່ອນໄຫວ
ເນັ້ນແຖວຕາຕະລາງ ຫຼືຕາລາງໂດຍການເພີ່ມ .table-active
ຊັ້ນຮຽນ.
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@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
Larry the Bird
@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 >
ຕົວແປ ແລະຕາຕະລາງສໍານຽງເຮັດວຽກແນວໃດ?
ສໍາລັບຕາຕະລາງສໍານຽງ ( ແຖວເສັ້ນດ່າງ , ແຖວ hoverable , ແລະ ຕາຕະລາງການເຄື່ອນໄຫວ ), ພວກເຮົາໄດ້ນໍາໃຊ້ເຕັກນິກບາງຢ່າງເພື່ອເຮັດໃຫ້ຜົນກະທົບເຫຼົ່ານີ້ໃຊ້ໄດ້ກັບ ຕົວແປຕາຕະລາງ ຂອງພວກເຮົາທັງຫມົດ :
ພວກເຮົາເລີ່ມຕົ້ນໂດຍການຕັ້ງພື້ນຫລັງຂອງຕາລາງຕາຕະລາງທີ່ມີ --bs-table-bg
ຄຸນສົມບັດທີ່ກໍາຫນົດເອງ. ການປ່ຽນແປງຕາຕະລາງທັງຫມົດຫຼັງຈາກນັ້ນກໍານົດຄຸນສົມບັດທີ່ກໍາຫນົດເອງນັ້ນເພື່ອ colorize ຕາລາງຕາຕະລາງ. ດ້ວຍວິທີນີ້, ພວກເຮົາບໍ່ມີບັນຫາຖ້າສີເຄິ່ງໂປ່ງໃສຖືກໃຊ້ເປັນພື້ນຫລັງຕາຕະລາງ.
ຫຼັງຈາກນັ້ນ, ພວກເຮົາເພີ່ມເງົາ inset ປ່ອງໃສ່ໃນຕາຕະລາງຕາຕະລາງໂດຍມີ box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
ການຊັ້ນເທິງຂອງໃດຫນຶ່ງທີ່ກໍານົດໄວ້ background-color
. ເນື່ອງຈາກວ່າພວກເຮົາໃຊ້ການແຜ່ກະຈາຍຂະຫນາດໃຫຍ່ແລະບໍ່ມີການມົວ, ສີຈະເປັນ monotone. ເນື່ອງຈາກ ບໍ່ໄດ້ຕັ້ງ --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
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-bordered" >
...
</ table >
ເຄື່ອງໃຊ້ສີຂອບສາ ມາດຖືກເພີ່ມເພື່ອປ່ຽນສີ:
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-bordered border-primary" >
...
</ table >
ຕາຕະລາງທີ່ບໍ່ມີຂອບເຂດ
ເພີ່ມ .table-borderless
ສໍາລັບຕາຕະລາງທີ່ບໍ່ມີຂອບເຂດ.
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-borderless" >
...
</ table >
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-dark table-borderless" >
...
</ table >
ໂຕະນ້ອຍ
ຕື່ມໃສ່ .table-sm
ເພື່ອເຮັດໃຫ້ .table
ຫນາແຫນ້ນຫຼາຍໂດຍການຕັດຈຸລັງທັງຫມົດ padding
ເປັນເຄິ່ງຫນຶ່ງ.
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@twitter
ສຳເນົາ
< table class = "table table-sm" >
...
</ table >
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
1
ມາກ
ໂອໂຕ
@mdo
2
ຢາໂຄບ
ທອນຕັນ
@ໄຂມັນ
3
Larry the Bird
@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 ຂອງພວກເຮົາ. ເນື່ອງຈາກວ່າພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ກໍານົດເປົ້າຫມາຍທັງຫມົດ td
s ແລະ th
s ໃນ thead
, tbody
, ແລະ tfoot
, ຕົວເລືອກຂອງພວກເຮົາຈະເບິ່ງຂ້ອນຂ້າງຍາວໂດຍບໍ່ມີມັນ. ດັ່ງນັ້ນ, ພວກເຮົາໃຊ້ .table > :not(caption) > * > *
ຕົວເລືອກທີ່ມີລັກສະນະແປກໆເພື່ອແນໃສ່ td
s ແລະ th
s ທັງຫມົດຂອງ .table
ຕາຕະລາງ, ແຕ່ບໍ່ມີຕາຕະລາງທີ່ມີທ່າແຮງໃດໆ.
ໃຫ້ສັງເກດວ່າຖ້າທ່ານເພີ່ມ <tr>
s ເປັນເດັກນ້ອຍໂດຍກົງຂອງຕາຕະລາງ, ສິ່ງເຫຼົ່ານັ້ນ <tr>
ຈະຖືກຫໍ່ຢູ່ໃນ <tbody>
ຄ່າເລີ່ມຕົ້ນ, ດັ່ງນັ້ນຈຶ່ງເຮັດໃຫ້ຕົວເລືອກຂອງພວກເຮົາເຮັດວຽກຕາມຈຸດປະສົງ.
ຮ່າງກາຍ
ຫົວຕາຕະລາງ
ຄ້າຍຄືກັນກັບຕາຕະລາງແລະຕາຕະລາງຊ້ໍາ, ໃຊ້ຫ້ອງຮຽນ modifier .table-light
ຫຼື .table-dark
ເພື່ອເຮັດໃຫ້ <thead>
s ປາກົດແສງສະຫວ່າງຫຼືສີຂີ້ເຖົ່າຊ້ໍາ.
#
ທໍາອິດ
ສຸດທ້າຍ
ຈັບ
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
Larry the Bird
@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 >
ຕາຕະລາງຕອບສະຫນອງ
ຕາຕະລາງທີ່ຕອບສະຫນອງເຮັດໃຫ້ຕາຕະລາງສາມາດເລື່ອນອອກຕາມລວງນອນດ້ວຍຄວາມສະດວກສະບາຍ. ເຮັດໃຫ້ຕາຕະລາງຕອບສະຫນອງໃນທົ່ວ viewports ທັງຫມົດໂດຍການຫໍ່ .table
a .table-responsive
. ຫຼື, ເລືອກຈຸດແບ່ງສູງສຸດທີ່ຈະມີຕາຕະລາງການຕອບສະໜອງໂດຍການນຳໃຊ້ .table-responsive{-sm|-md|-lg|-xl|-xxl}
.
ຕັດ/ຕັດແນວຕັ້ງ
ຕາຕະລາງການຕອບສະ ໜອງ ໃຊ້ overflow-y: hidden
, ເຊິ່ງປິດເນື້ອຫາໃດໆທີ່ເກີນຂອບລຸ່ມຫຼືເທິງຂອງຕາຕະລາງ. ໂດຍສະເພາະ, ນີ້ສາມາດ clip off ເມນູເລື່ອນລົງແລະ widget ພາກສ່ວນທີສາມອື່ນໆ.
ຕອບສະໜອງສະເໝີ
ໃນທົ່ວທຸກຈຸດຢຸດ, ໃຊ້ .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
ຕົວແປ.