Փաստաթղթեր և օրինակներ՝ աղյուսակների ընտրության ձևավորման համար (հաշվի առնելով դրանց տարածված օգտագործումը JavaScript հավելվածներում) Bootstrap-ով:
Օրինակներ
Երրորդ կողմի վիջեթներում աղյուսակների լայն տարածման պատճառով, ինչպիսիք են օրացույցները և ամսաթվերը ընտրողները, մենք նախագծել ենք մեր աղյուսակները, որպեսզի կարողանանք մուտք գործել : Պարզապես ավելացրեք բազային դասը .table
ցանկացածին <table>
, այնուհետև ընդարձակեք հատուկ ոճերի կամ մեր տարբեր ներառված փոփոխիչների դասերի հետ:
Օգտագործելով աղյուսակի ամենահիմնական նշագծումը, ահա թե ինչպես .table
են նայվում հիմնված աղյուսակները 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>
Սեղանի գլխի ընտրանքներ
Աղյուսակների և մուգ աղյուսակների նման, օգտագործեք մոդիֆիկատորների դասերը .thead-light
կամ s-ը բաց կամ մուգ մոխրագույն տեսք .thead-dark
հաղորդելու համար:<thead>
# |
Առաջին |
Վերջին |
Բռնակ |
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 |
Լարի թռչուն |
@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 |
Լարի թռչուն |
@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 |
Լարի թռչուն |
@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 |
Լարի թռչուն |
@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
՝ սավառնող վիճակը միացնելու համար աղյուսակի տողերում <tbody>
:
# |
Առաջին |
Վերջին |
Բռնակ |
1 |
նշագծել |
Օտտո |
@mdo |
2 |
Յակոբ |
Թորնթոն |
@ճարպ |
3 |
Լարի թռչուն |
@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 |
Լարի թռչուն |
@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 |
Լարի թռչուն |
@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 |
Լարի թռչուն |
@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-
նախածանցների և տեսադաշտերի շուրջ (որոնք կարող են առաջանալ որոշակի պայմաններում, օրինակ, բարձր dpi սարքերում)՝ օգտագործելով այս համեմատությունների համար ավելի բարձր ճշգրտությամբ արժեքներ: .
Ենթագրեր
A- <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>
Պատասխանատու աղյուսակներ
Պատասխանատու աղյուսակները թույլ են տալիս հեշտությամբ ոլորել աղյուսակները հորիզոնական: Դարձրեք ցանկացած աղյուսակ արձագանքող բոլոր դիտակետերում՝ փաթաթելով a- .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>