Source

ຕາຕະລາງ

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

ຕົວຢ່າງ

ເນື່ອງຈາກການນໍາໃຊ້ຕາຕະລາງຢ່າງກວ້າງຂວາງໃນທົ່ວ widget ພາກສ່ວນທີສາມເຊັ່ນ: ປະຕິທິນແລະການເລືອກວັນທີ, ພວກເຮົາໄດ້ອອກແບບຕາຕະລາງຂອງພວກເຮົາທີ່ຈະ ເລືອກເອົາ . ພຽງແຕ່ເພີ່ມຊັ້ນພື້ນຖານ .tableໃສ່ໃດຫນຶ່ງ <table>, ຫຼັງຈາກນັ້ນຂະຫຍາຍດ້ວຍຄໍເຕົ້າໄຂ່ທີ່ກໍານົດເອງຫຼືຫ້ອງຮຽນດັດແກ້ລວມຂອງພວກເຮົາ.

ການນໍາໃຊ້ເຄື່ອງຫມາຍຕາຕະລາງພື້ນຖານທີ່ສຸດ, ນີ້ແມ່ນວິທີການ .tableຕາຕະລາງ -based ເບິ່ງໃນ Bootstrap. ຮູບແບບຕາຕະລາງທັງໝົດແມ່ນໄດ້ຮັບມໍລະດົກໃນ Bootstrap 4 , ຊຶ່ງຫມາຍຄວາມວ່າຕາຕະລາງທີ່ວາງໄວ້ຈະຖືກຈັດຮູບແບບໃນລັກສະນະດຽວກັນກັບພໍ່ແມ່.

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ນອກນັ້ນທ່ານຍັງສາມາດປີ້ນສີ - ດ້ວຍຂໍ້ຄວາມອ່ອນໆໃນພື້ນຫລັງຊ້ໍາ - ດ້ວຍ .table-dark.

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	ລາຣີ	ນົກ	@twitter

<table class="table table-dark">
  <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>

ຕົວເລືອກຫົວຕາຕະລາງ

ຄ້າຍຄືກັນກັບຕາຕະລາງແລະຕາຕະລາງຊ້ໍາ, ໃຊ້ຫ້ອງຮຽນ modifier .thead-lightຫຼື .thead-darkເພື່ອເຮັດໃຫ້ <thead>s ປາກົດແສງສະຫວ່າງຫຼືສີຂີ້ເຖົ່າຊ້ໍາ.

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	ລາຣີ	ນົກ	@twitter

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	ລາຣີ	ນົກ	@twitter

<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-stripedເພື່ອເພີ່ມເສັ້ນລາຍມ້າລາຍໃສ່ແຖວຕາຕະລາງໃດໆກໍຕາມພາຍໃນ <tbody>.

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	ລາຣີ	ນົກ	@twitter

<table class="table table-striped">
  <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>

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	ລາຣີ	ນົກ	@twitter

<table class="table table-striped table-dark">
  <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-borderedສໍາລັບຂອບໃນທຸກດ້ານຂອງຕາຕະລາງແລະຕາລາງ.

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	Larry the Bird		@twitter

<table class="table table-bordered">
  <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>

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	Larry the Bird		@twitter

<table class="table table-bordered table-dark">
  <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>

ແຖວທີ່ເລື່ອນໄດ້

ເພີ່ມ .table-hoverເພື່ອເປີດໃຊ້ສະຖານະ hover ໃນແຖວຕາຕະລາງພາຍໃນ <tbody>.

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	Larry the Bird		@twitter

<table class="table table-hover">
  <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>

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	Larry the Bird		@twitter

<table class="table table-hover table-dark">
  <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>

ໂຕະນ້ອຍ

ເພີ່ມ .table-smເພື່ອເຮັດໃຫ້ຕາຕະລາງມີຄວາມຫນາແຫນ້ນຫຼາຍໂດຍການຕັດຊ່ອງຫວ່າງຂອງຈຸລັງເປັນເຄິ່ງຫນຶ່ງ.

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	Larry the Bird		@twitter

<table class="table table-sm">
  <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>

#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	Larry the Bird		@twitter

<table class="table table-sm table-dark">
  <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 rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

  <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>

ຕົວແປພື້ນຫຼັງຕາຕະລາງປົກກະຕິແມ່ນບໍ່ສາມາດໃຊ້ໄດ້ກັບຕາຕະລາງຊ້ໍາ, ແນວໃດກໍ່ຕາມ, ທ່ານສາມາດນໍາໃຊ້ ຂໍ້ຄວາມຫຼືຜົນປະໂຫຍດພື້ນຖານ ເພື່ອບັນລຸຮູບແບບທີ່ຄ້າຍຄືກັນ.

#	ຫົວຂໍ້	ຫົວຂໍ້
1	ເຊລ	ເຊລ
2	ເຊລ	ເຊລ
3	ເຊລ	ເຊລ
4	ເຊລ	ເຊລ
5	ເຊລ	ເຊລ
6	ເຊລ	ເຊລ
7	ເຊລ	ເຊລ
8	ເຊລ	ເຊລ
9	ເຊລ	ເຊລ

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ

ການນໍາໃຊ້ສີເພື່ອເພີ່ມຄວາມຫມາຍພຽງແຕ່ສະຫນອງການສະແດງໃຫ້ເຫັນ, ທີ່ຈະບໍ່ໄດ້ຮັບການນໍາໃຊ້ເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ - ເຊັ່ນ: ຕົວອ່ານຫນ້າຈໍ. ໃຫ້ແນ່ໃຈວ່າຂໍ້ມູນທີ່ສະແດງໂດຍສີແມ່ນເຫັນໄດ້ຊັດເຈນຈາກເນື້ອຫາຂອງມັນເອງ (ເຊັ່ນ: ຂໍ້ຄວາມທີ່ເຫັນໄດ້), ຫຼືຖືກລວມຜ່ານວິທີການທາງເລືອກ, ເຊັ່ນ: ຂໍ້ຄວາມເພີ່ມເຕີມທີ່ເຊື່ອງໄວ້ກັບ .sr-onlyຊັ້ນ.

ສ້າງຕາຕະລາງທີ່ຕອບສະຫນອງໂດຍການຫໍ່ໃດໆ .tableກັບ .table-responsive{-sm|-md|-lg|-xl}, ເຮັດໃຫ້ຕາຕະລາງເລື່ອນຕາມລວງນອນໃນແຕ່ລະ max-widthຈຸດແບ່ງເຖິງ (ແຕ່ບໍ່ລວມ) 576px, 768px, 992px, ແລະ 1120px, ຕາມລໍາດັບ.

ຈົ່ງຈື່ໄວ້ວ່າເນື່ອງຈາກຕົວທ່ອງເວັບບໍ່ສະຫນັບສະຫນູນ ການສອບຖາມສະພາບການໄລຍະ , ພວກເຮົາເຮັດວຽກກ່ຽວກັບຂໍ້ຈໍາກັດຂອງ ຄໍານໍາຫນ້າ min-ແລະ max-viewports ທີ່ມີຄວາມກວ້າງແຕ່ສ່ວນຫນຶ່ງ (ເຊິ່ງສາມາດເກີດຂື້ນພາຍໃຕ້ເງື່ອນໄຂບາງຢ່າງໃນອຸປະກອນ dpi ສູງ, ສໍາລັບຕົວຢ່າງ) ໂດຍໃຊ້ຄ່າທີ່ມີຄວາມແມ່ນຍໍາສູງສໍາລັບການປຽບທຽບເຫຼົ່ານີ້. .

ຄຳບັນຍາຍ

ຫນ້າ <caption>ທີ່ຄ້າຍຄືຫົວຂໍ້ສໍາລັບຕາຕະລາງ. ມັນຊ່ວຍໃຫ້ຜູ້ໃຊ້ທີ່ມີຜູ້ອ່ານຫນ້າຈໍຊອກຫາຕາຕະລາງແລະເຂົ້າໃຈສິ່ງທີ່ມັນກ່ຽວກັບແລະຕັດສິນໃຈວ່າພວກເຂົາຕ້ອງການອ່ານມັນ.

ລາຍຊື່ຜູ້ໃຊ້
#	ທໍາອິດ	ສຸດທ້າຍ	ຈັບ
1	ມາກ	ໂອໂຕ	@mdo
2	ຢາໂຄບ	ທອນຕັນ	@ໄຂມັນ
3	ລາຣີ	ນົກ	@twitter

<table class="table">
  <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}.

ຕັດ/ຕັດແນວຕັ້ງ

ຕາຕະລາງການຕອບສະ ໜອງ ໃຊ້ 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}ຕາມຄວາມຕ້ອງການເພື່ອສ້າງຕາຕະລາງທີ່ຕອບສະຫນອງເຖິງຈຸດແບ່ງສະເພາະ. ຈາກຈຸດຢຸດນັ້ນຂຶ້ນໄປ, ຕາຕະລາງຈະປະຕິບັດຕົວຕາມປົກກະຕິແລະບໍ່ເລື່ອນຕາມແນວນອນ.

#	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້
1	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ
2	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ
3	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ

#	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້
1	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ
2	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ
3	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ

#	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້
1	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ
2	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ
3	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ

#	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້	ຫົວຂໍ້
1	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ
2	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ
3	ເຊລ	ເຊລ	ເຊລ	ເຊລ	ເຊລ

<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>