გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

მაგიდები

დოკუმენტაცია და მაგალითები ცხრილების სტილისტიკისთვის (მათი გავრცელებული გამოყენება JavaScript დანამატებში) Bootstrap-ით.

მიმოხილვა

ელემენტების ფართო გამოყენების გამო <table>მესამე მხარის ვიჯეტებში, როგორიცაა კალენდრები და თარიღის ამომრჩევები, Bootstrap-ის ცხრილები ნებადართულია . დაამატეთ საბაზისო კლასი .tableნებისმიერს <table>, შემდეგ გააფართოვეთ ჩვენი სურვილისამებრ მოდიფიკატორის კლასებით ან მორგებული სტილებით. ცხრილის ყველა სტილი არ არის მემკვიდრეობით მიღებული Bootstrap-ში, რაც ნიშნავს, რომ ნებისმიერი ჩადგმული ცხრილი შეიძლება იყოს დამოუკიდებლად მშობლისგან.

ცხრილის ყველაზე ძირითადი მარკირების გამოყენებით, აი, როგორ .tableგამოიყურება დაფუძნებული ცხრილები Bootstrap-ში.

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
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 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 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-striped">
  ...
</table>

ეს კლასები ასევე შეიძლება დაემატოს ცხრილის ვარიანტებს:

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-success table-striped">
  ...
</table>

გადასატანი რიგები

დამატება .table-hover, რათა ჩართოთ ჰოვერ მდგომარეობა ცხრილის რიგებში <tbody>.

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-hover">
  ...
</table>
# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-dark table-hover">
  ...
</table>

ეს გადასატანი რიგები ასევე შეიძლება გაერთიანდეს ზოლიან ვარიანტთან:

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-striped table-hover">
  ...
</table>

აქტიური მაგიდები

მონიშნეთ ცხრილის მწკრივი ან უჯრედი .table-activeკლასის დამატებით.

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @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 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @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>

როგორ მუშაობს ვარიანტები და აქცენტირებული ცხრილები?

აქცენტირებული ცხრილებისთვის ( ზოლიანი რიგები , გადასატანი რიგები და აქტიური ცხრილები ), ჩვენ გამოვიყენეთ რამდენიმე ტექნიკა, რათა ეს ეფექტები იმუშაოს ცხრილის ყველა ვარიანტზე :

  • ჩვენ ვიწყებთ ცხრილის უჯრედის ფონის დაყენებით --bs-table-bgმორგებული თვისებით. ცხრილის ყველა ვარიანტმა დააყენა ეს მორგებული თვისება ცხრილის უჯრედების გასაფერადებლად. ამ გზით, ჩვენ არ შეგვექმნება პრობლემები, თუ ნახევრად გამჭვირვალე ფერები გამოიყენება მაგიდის ფონად.
  • შემდეგ ჩვენ დავამატებთ ჩასმული ყუთის ჩრდილს ცხრილის უჯრედებზე box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ფენით ნებისმიერი მითითებულის თავზე background-color. იმის გამო, რომ ჩვენ ვიყენებთ უზარმაზარ გავრცელებას და ბუნდოვანების გარეშე, ფერი იქნება ერთფეროვანი. ვინაიდან --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 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-bordered">
  ...
</table>

ფერების შესაცვლელად შეიძლება დაემატოს საზღვრის ფერის კომუნალური საშუალებები :

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-bordered border-primary">
  ...
</table>

მაგიდები საზღვრების გარეშე

დაამატეთ .table-borderlessსაზღვრების გარეშე ცხრილისთვის.

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-borderless">
  ...
</table>
# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-dark table-borderless">
  ...
</table>

პატარა მაგიდები

დაამატეთ .table-sm, რომ .tableუფრო კომპაქტური გახადოთ, ყველა უჯრედი paddingშუაზე გაჭერით.

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-sm">
  ...
</table>
# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @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
სათაური სათაური სათაური
Პირველი ბოლო
Პირველი ბოლო
C Პირველი ბოლო
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>, რითაც ჩვენი სელექტორები იმუშავებენ ისე, როგორც დანიშნულებისამებრ.

ანატომია

მაგიდის თავი

ცხრილებისა და მუქი ცხრილების მსგავსად, გამოიყენეთ მოდიფიკატორის კლასები .table-lightან .table-darkიმისათვის, რომ <thead>s გამოჩნდეს ღია ან მუქი ნაცრისფერი.

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

მაგიდის ფეხი

# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
ქვედა კოლონტიტული ქვედა კოლონტიტული ქვედა კოლონტიტული ქვედა კოლონტიტული
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

წარწერები

A <caption>ფუნქციონირებს, როგორც სათაური მაგიდისთვის. ის ეხმარება მომხმარებლებს, რომლებსაც აქვთ ეკრანის წამკითხველი, იპოვონ ცხრილი და გაიგონ, რაზეა საუბარი და გადაწყვიტონ, სურთ თუ არა მისი წაკითხვა.

მომხმარებელთა სია
# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

თქვენ ასევე შეგიძლიათ დადოთ <caption>მაგიდის ზედა ნაწილში .caption-top.

მომხმარებელთა სია
# Პირველი ბოლო Სახელური
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
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>

საპასუხო მაგიდები

საპასუხო ცხრილები საშუალებას აძლევს ცხრილებს ჰორიზონტალურად გადაახვიონ მარტივად. გახადეთ ნებისმიერი ცხრილი პასუხისმგებელი ყველა ხედის პორტში, .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:                 $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ცვლადით.