ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
Check
in English

โต๊ะ

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

ภาพรวม

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

การใช้มาร์กอัปตารางพื้นฐานที่สุด ต่อไปนี้คือ.tableลักษณะตารางแบบอิงใน Bootstrap

# อันดับแรก ล่าสุด รับมือ
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 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 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-striped">
  ...
</table>

คอลัมน์ลาย

ใช้.table-striped-columnsเพื่อเพิ่มลายทางม้าลายให้กับคอลัมน์ตารางใดๆ

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-striped-columns">
  ...
</table>

คลาสเหล่านี้ยังสามารถเพิ่มลงในตัวแปรตารางได้:

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-dark table-striped">
  ...
</table>
# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-dark table-striped-columns">
  ...
</table>
# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-success table-striped">
  ...
</table>
# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-success table-striped-columns">
  ...
</table>

แถวที่เลื่อนได้

เพิ่ม.table-hoverเพื่อเปิดใช้งานสถานะโฮเวอร์บนแถวของตารางภายในไฟล์<tbody>.

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-hover">
  ...
</table>
# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-dark table-hover">
  ...
</table>

แถวที่เลื่อนได้เหล่านี้ยังสามารถใช้ร่วมกับตัวแปรแถวแบบสไทรพ์ได้:

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-striped table-hover">
  ...
</table>

ตารางที่ใช้งานอยู่

เน้นแถวหรือเซลล์ของตารางโดยเพิ่ม.table-activeชั้นเรียน

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

ตัวแปรและตารางเน้นเสียงทำงานอย่างไร

สำหรับตารางที่มีการเน้นเสียง ( แถว แบบ สไทรพ์ คอลัมน์แบบส ไทรพ์ แถว ที่เลื่อน ได้ และตารางที่ใช้งาน ) เราใช้เทคนิคบางอย่างเพื่อทำให้เอฟเฟกต์เหล่านี้ใช้ได้กับตัวแปรตาราง ทั้งหมดของเรา :

  • เราเริ่มต้นด้วยการตั้งค่าพื้นหลังของเซลล์ตารางด้วย--bs-table-bgคุณสมบัติที่กำหนดเอง ตัวแปรตารางทั้งหมดจะตั้งค่าคุณสมบัติแบบกำหนดเองนั้นเพื่อทำให้เซลล์ตารางมีสี ด้วยวิธีนี้ เราจะไม่ประสบปัญหาหากใช้สีกึ่งโปร่งใสเป็นพื้นหลังของตาราง
  • จากนั้นเราเพิ่มเงาของกล่องใส่ลงในเซลล์ของตารางbox-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);เพื่อวางทับบน เซลล์ background-colorที่ ระบุ เนื่องจากเราใช้สเปรดขนาดใหญ่และไม่เบลอ สีจะเป็นแบบโมโนโทน เนื่องจาก--bs-table-accent-bgไม่มีการตั้งค่าตามค่าเริ่มต้น เราจึงไม่มีเงากล่องเริ่มต้น
  • เมื่อ มี การเพิ่ม , .table-stripedหรือคลาสจะถูกตั้งค่าเป็นสีกึ่งโปร่งใสเพื่อทำให้พื้นหลังเป็นสี.table-striped-columns.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));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

ขอบโต๊ะ

โต๊ะติดขอบ

เพิ่ม.table-borderedเส้นขอบทุกด้านของตารางและเซลล์

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-bordered">
  ...
</table>

คุณสามารถเพิ่มยูทิลิตี้สีเส้นขอบ เพื่อเปลี่ยนสีได้:

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-bordered border-primary">
  ...
</table>

โต๊ะไร้ขอบ

เพิ่ม.table-borderlessสำหรับตารางที่ไม่มีเส้นขอบ

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-borderless">
  ...
</table>
# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-dark table-borderless">
  ...
</table>

โต๊ะเล็ก

เพิ่ม.table-smเพื่อให้.tableกระชับยิ่งขึ้นโดยการตัดเซลล์ทั้งหมดpaddingออกครึ่งหนึ่ง

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-sm">
  ...
</table>
# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-dark table-sm">
  ...
</table>

ตัวแบ่งกลุ่มตาราง

เพิ่มเส้นขอบที่หนาขึ้น เข้มขึ้นระหว่างกลุ่มตาราง — <thead>, <tbody>, และ<tfoot>—ด้วย.table-group-divider. ปรับแต่งสีด้วยการเปลี่ยนสีborder-top-color(ซึ่งขณะนี้เรายังไม่มีคลาสยูทิลิตี้สำหรับตอนนี้)

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

การจัดตำแหน่งแนวตั้ง

เซลล์ตารางของ<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 แลร์รี่ นก @ทวิตเตอร์
<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>จะถูกรวมไว้ใน a <tbody>โดยค่าเริ่มต้น ซึ่งจะทำให้ตัวเลือกของเราทำงานได้ตามที่ตั้งใจไว้

กายวิภาคศาสตร์

หัวโต๊ะ

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

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

ขาโต๊ะ

# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 แลร์รี่ นก @ทวิตเตอร์
ส่วนท้าย ส่วนท้าย ส่วนท้าย ส่วนท้าย
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

คำบรรยาย

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

รายชื่อผู้ใช้
# อันดับแรก ล่าสุด รับมือ
1 เครื่องหมาย อ็อตโต @mdo
2 เจคอบ ธอร์นตัน @อ้วน
3 ลาร์รีเดอะเบิร์ด @ทวิตเตอร์
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

คุณยังสามารถวางที่<caption>ด้านบนของตารางด้วย.caption-top.

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

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

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

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

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

ตอบสนองเสมอ

ในทุกจุดพัก ใช้.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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$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-scaleตัวแปรอีกด้วย