Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
in English

Սեղաններ

Փաստաթղթեր և օրինակներ՝ աղյուսակների ընտրության ձևավորման համար (հաշվի առնելով դրանց տարածված օգտագործումը JavaScript հավելվածներում) Bootstrap-ով:

Ընդհանուր ակնարկ

Երրորդ կողմի վիջեթներում, ինչպիսիք են օրացույցները և ամսաթվերը ընտրողները, տարրերի լայնածավալ կիրառման շնորհիվ <table>, Bootstrap-ի աղյուսակները միացված են : Ավելացրե՛ք բազային դասը .tableցանկացածին <table>, այնուհետև ընդլայնեք մեր կամընտիր մոդիֆիկատորների դասերը կամ հատուկ ոճերը: Բոլոր աղյուսակների ոճերը ժառանգված չեն Bootstrap-ում, ինչը նշանակում է, որ ցանկացած ներդիր աղյուսակ կարող է ձևավորվել ծնողից անկախ:

Օգտագործելով աղյուսակի ամենահիմնական նշագծումը, ահա թե ինչպես .tableեն նայվում հիմնված աղյուսակները Bootstrap-ում:

# Առաջին Վերջին Բռնակ
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 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 Լարի թռչուն @twitter
<table class="table table-striped">
  ...
</table>

Այս դասերը կարող են նաև ավելացվել աղյուսակի տարբերակներին.

# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-dark table-striped">
  ...
</table>
# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-success table-striped">
  ...
</table>

Շարժվող տողեր

Ավելացրեք .table-hover՝ սավառնող վիճակը միացնելու համար աղյուսակի տողերում <tbody>:

# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-hover">
  ...
</table>
# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-dark table-hover">
  ...
</table>

Այս շարժվող տողերը կարող են նաև համակցվել գծավոր տարբերակի հետ.

# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-striped table-hover">
  ...
</table>

Ակտիվ սեղաններ

Նշեք աղյուսակի տող կամ բջիջ՝ ավելացնելով .table-activeդաս:

# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
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 Յակոբ Թորնթոն @ճարպ
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 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-bordered">
  ...
</table>

Գույները փոխելու համար կարող են ավելացվել եզրագծերի գույնի կոմունալ ծառայություններ .

# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-bordered border-primary">
  ...
</table>

Սեղաններ առանց եզրագծերի

Ավելացնել .table-borderlessառանց եզրագծերի սեղանի համար:

# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-borderless">
  ...
</table>
# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-dark table-borderless">
  ...
</table>

Փոքր սեղաններ

Ավելացրեք ավելի կոմպակտ .table-smդարձնելու համար .table՝ ամբողջ բջիջը paddingկիսով չափ կտրելով:

# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-sm">
  ...
</table>
# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
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
Վերնագիր Վերնագիր Վերնագիր
Ա Առաջին Վերջին
Բ Առաջին Վերջին
Գ Առաջին Վերջին
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>կփաթաթվեն a- <tbody>ով, այդպիսով մեր ընտրիչները կաշխատեն ըստ նախատեսվածի:

Անատոմիա

Սեղանի գլուխ

Աղյուսակների և մուգ աղյուսակների նման, օգտագործեք մոդիֆիկատորների դասերը .table-lightկամ s-ը բաց կամ մուգ մոխրագույն տեսք .table-darkհաղորդելու համար:<thead>

# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչունը @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչունը @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Սեղանի ոտք

# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչունը @twitter
Ստորագիր Ստորագիր Ստորագիր Ստորագիր
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Ենթագրեր

A- <caption>ն գործում է աղյուսակի վերնագրի նման: Այն օգնում է էկրանի ընթերցիչներ ունեցող օգտատերերին գտնել աղյուսակ և հասկանալ, թե ինչի մասին է խոսքը և որոշել՝ արդյոք ցանկանում են կարդալ այն:

Օգտագործողների ցուցակ
# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
3 Լարի թռչուն @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Կարող եք նաև <caption>սեղանի վերևում դնել .caption-top.

Օգտագործողների ցուցակ
# Առաջին Վերջին Բռնակ
1 նշագծել Օտտո @mdo
2 Յակոբ Թորնթոն @ճարպ
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>

Պատասխանատու աղյուսակներ

Պատասխանատու աղյուսակները թույլ են տալիս հեշտությամբ ոլորել աղյուսակները հորիզոնական: Դարձրեք ցանկացած աղյուսակ արձագանքող բոլոր դիտակետերում՝ փաթաթելով a- .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փոփոխականով: