ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ຕາຕະລາງ

ເອກະສານແລະຕົວຢ່າງສໍາລັບການເລືອກໃນຄໍເຕົ້າໄຂ່ທີ່ຂອງຕາຕະລາງ (ໃຫ້ການນໍາໃຊ້ທົ່ວໄປຂອງເຂົາເຈົ້າໃນ plugins JavaScript) ກັບ Bootstrap.

ພາບລວມ

ເນື່ອງຈາກການນໍາໃຊ້ <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 ຂອງພວກເຮົາ. ເນື່ອງຈາກວ່າພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ກໍານົດເປົ້າຫມາຍທັງຫມົດ tds ແລະ ths ໃນ thead, tbody, ແລະ tfoot, ຕົວເລືອກຂອງພວກເຮົາຈະເບິ່ງຂ້ອນຂ້າງຍາວໂດຍບໍ່ມີມັນ. ດັ່ງນັ້ນ, ພວກເຮົາໃຊ້ .table > :not(caption) > * > *ຕົວເລືອກທີ່ມີລັກສະນະແປກໆເພື່ອແນໃສ່ tds ແລະ ths ທັງຫມົດຂອງ .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 ທັງ​ຫມົດ​ໂດຍ​ການ​ຫໍ່ .tablea .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:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$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ຕົວແປ.