Source

โต๊ะ

เอกสารประกอบและตัวอย่างสำหรับการเลือกใช้การจัดรูปแบบตาราง (ตามการใช้งานที่แพร่หลายในปลั๊กอิน JavaScript) ด้วย Bootstrap

ตัวอย่าง

เนื่องจากการใช้ตารางอย่างแพร่หลายในวิดเจ็ตของบริษัทอื่น เช่น ปฏิทินและเครื่องมือเลือกวันที่ เราจึงออกแบบตารางของเราให้เลือกเข้าร่วม เพียงเพิ่มคลาสพื้นฐาน.tableลงใน any <table>จากนั้นขยายด้วยสไตล์ที่กำหนดเองหรือคลาสตัวปรับแต่งต่างๆ ที่รวมไว้ของเรา

การใช้มาร์กอัปตารางพื้นฐานที่สุด ต่อไปนี้คือ.tableลักษณะตารางแบบอิงใน Bootstrap สไตล์ตารางทั้งหมดสืบทอดมาใน Bootstrap 4ซึ่งหมายความว่าตารางที่ซ้อนกันจะถูกจัดสไตล์ในลักษณะเดียวกับพาเรนต์

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์ 
<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 แลร์รี่ นก @ทวิตเตอร์ 
<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>

ตัวเลือกหัวโต๊ะ

คล้ายกับตารางและตารางสีเข้ม ใช้คลาสตัวปรับแต่ง.thead-lightหรือ.thead-darkเพื่อให้<thead>ปรากฏเป็นสีเทาอ่อนหรือเข้ม

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์
# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์ 
<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 แลร์รี่ นก @ทวิตเตอร์ 
<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 แลร์รี่ นก @ทวิตเตอร์ 
<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 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์ 
<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 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์ 
<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เพื่อเปิดใช้งานสถานะโฮเวอร์บนแถวของตารางภายในไฟล์<tbody>.

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์ 
<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 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์ 
<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 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์ 
<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 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์ 
<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ชั้นเรียน

สร้างตารางที่ตอบสนองโดยการปิด any .tableด้วย.table-responsive{-sm|-md|-lg|-xl}ทำให้ตารางเลื่อนในแนวนอนที่จุดพักแต่ละmax-widthจุดสูงสุด (แต่ไม่รวม) 576px, 768px, 992px และ 1120px ตามลำดับ

โปรดทราบว่าเนื่องจากเบราว์เซอร์ไม่สนับสนุนการสืบค้นบริบทแบบช่วงเราจึงหลีกเลี่ยงข้อจำกัดmin-และmax-คำนำหน้าและวิวพอร์ตที่มีความกว้างแบบเศษส่วน (ซึ่งสามารถเกิดขึ้นได้ภายใต้เงื่อนไขบางประการในอุปกรณ์ที่มีความละเอียดสูง เป็นต้น) โดยใช้ค่าที่มีความแม่นยำสูงกว่าสำหรับการเปรียบเทียบเหล่านี้ .

คำบรรยาย

ทำ<caption>หน้าที่เหมือนหัวตาราง ซึ่งช่วยให้ผู้ใช้ที่มีโปรแกรมอ่านหน้าจอค้นหาตารางและเข้าใจว่าตารางเกี่ยวกับอะไร และตัดสินใจว่าต้องการอ่านหรือไม่

รายชื่อผู้ใช้
# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์ 
<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>

ตารางตอบสนอง

ตารางที่ปรับเปลี่ยนตามอุปกรณ์ช่วยให้เลื่อนตารางในแนวนอนได้อย่างง่ายดาย ทำให้ตารางตอบสนองในทุกวิวพอร์ตโดยครอบ.tableด้วย.table-responsive. หรือเลือกเบรกพอยต์สูงสุดที่จะมีตารางตอบสนองสูงสุดโดยใช้.table-responsive{-sm|-md|-lg|-xl}.

การตัด/การตัดในแนวตั้ง

ตารางที่ปรับเปลี่ยนตามอุปกรณ์ใช้ประโยชน์จากoverflow-y: hiddenซึ่งตัดเนื้อหาใดๆ ที่เกินขอบด้านล่างหรือขอบด้านบนของตาราง โดยเฉพาะอย่างยิ่งสิ่งนี้สามารถตัดเมนูแบบเลื่อนลงและวิดเจ็ตของบุคคลที่สามอื่น ๆ

ตอบสนองเสมอ

ในทุกจุดพัก ใช้.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>