Source

Ҷадвалҳо

Ҳуҷҷатҳо ва мисолҳо барои интихоби тарҳрезии ҷадвалҳо (бо назардошти истифодаи маъмули онҳо дар плагинҳои 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ё .thead-darkбарои <thead>пайдо кардани s хокистарии сабук ё торикро истифода баред.

# Аввал Охирин Дастак кардан
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 рух дода метавонад) бо истифода аз арзишҳо бо дақиқии баландтар барои ин муқоисаҳо кор мекунем. .

Сарлавҳаҳо

Функсия <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>

Ҷадвалҳои ҷавобӣ

Ҷадвалҳои ҷавобӣ имкон медиҳанд, ки ҷадвалҳо ба осонӣ ба таври уфуқӣ ҳаракат кунанд. Ҳар як ҷадвалро бо печонидани як .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 Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа
1 Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра
2 Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра
3 Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа
1 Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра
2 Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра
3 Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа Сарлавҳа
1 Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра
2 Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра
3 Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра Ҳуҷайра 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>