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-borderlessສໍາລັບຕາຕະລາງທີ່ບໍ່ມີຂອບເຂດ.

# ທໍາອິດ ສຸດທ້າຍ ຈັບ
1 ມາກ ໂອໂຕ @mdo
2 ຢາໂຄບ ທອນຕັນ @ໄຂມັນ
3 Larry the Bird @twitter 
<table class="table table-borderless">
  <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-borderlessຍັງສາມາດຖືກນໍາໃຊ້ໃນຕາຕະລາງຊ້ໍາ.

# ທໍາອິດ ສຸດທ້າຍ ຈັບ
1 ມາກ ໂອໂຕ @mdo
2 ຢາໂຄບ ທອນຕັນ @ໄຂມັນ
3 Larry the Bird @twitter 
<table class="table table-borderless 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 ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້
1 ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ
2 ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ
3 ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້
1 ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ
2 ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ
3 ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້ ຫົວ​ຂໍ້
1 ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ
2 ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ
3 ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ ເຊລ 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>