in English

جەدۋەل

Bootstrap ئارقىلىق جەدۋەللەرنى سۈزۈش ئۇسلۇبىدىكى ھۆججەتلەر ۋە مىساللار (ئۇلارنىڭ JavaScript قىستۇرمىلىرىدا كەڭ قوللىنىلغانلىقىنى كۆزدە تۇتۇپ).

بۇ بەتتە

ئومۇمىي چۈشەنچە

<table>كالېندار ۋە چېسلا تاللىغۇچ قاتارلىق ئۈچىنچى تەرەپ كىچىك قوراللىرىدا ئېلېمېنتلارنىڭ كەڭ كۆلەمدە ئىشلىتىلىشى سەۋەبىدىن ، Bootstrap نىڭ ئۈستەللىرى تاللانغان . ئاساسى سىنىپنى .tableھەر قانداق ئادەمگە قوشۇڭ <table>، ئاندىن بىزنىڭ ئىختىيارى ئۆزگەرتكۈچ سىنىپىمىز ياكى ئىختىيارى ئۇسلۇبلىرىمىز بىلەن كېڭەيتىڭ. بارلىق جەدۋەل ئۇسلۇبلىرى Bootstrap غا ۋارىسلىق قىلمايدۇ ، يەنى ھەر قانداق ئۇۋىغان جەدۋەللەرنى ئاتا-ئانىدىن مۇستەقىل ئۇسلۇبتا لايىھىلەشكە بولىدۇ.

ئەڭ ئاساسىي جەدۋەل بەلگىسىنى ئىشلىتىپ ، .tableBootstrap دا ئاساسلانغان جەدۋەللەرنىڭ كۆرۈنۈشى.

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@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>

Variants

رەڭلىك جەدۋەل ، جەدۋەل قۇر ياكى يەككە كاتەكچىلەرگە مەزمۇن خاراكتېرلىك دەرسلەرنى ئىشلىتىڭ.

سىنىپ	ماۋزۇ	ماۋزۇ
سۈكۈتتىكى	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
مۇۋەپپەقىيەت	Cell	Cell
خەتەر	Cell	Cell
ئاگاھلاندۇرۇش	Cell	Cell
ئۇچۇر	Cell	Cell
نۇر	Cell	Cell
قاراڭغۇ	Cell	Cell

<!-- 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ئىچىدىكى ھەر قانداق جەدۋەل قۇرىغا zebra- سىزىق قوشۇشقا ئىشلىتىڭ <tbody>.

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-striped">
  ...
</table>

سىزىقلىق ئىستون

.table-striped-columnsھەر قانداق جەدۋەل ئىستونىغا zebra-striping قوشۇشقا ئىشلىتىڭ .

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-striped-columns">
  ...
</table>

بۇ دەرسلەرنى جەدۋەلنىڭ ۋارىيانتلىرىغىمۇ قوشقىلى بولىدۇ:

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-striped-columns">
  ...
</table>

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-success table-striped">
  ...
</table>

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-success table-striped-columns">
  ...
</table>

يۆتكىلىشچان قۇر

.table-hoverA دىكى جەدۋەل قۇرلىرىغا يۆتكىلىش ھالىتىنى قوزغىتىش ئۈچۈن قوشۇڭ <tbody>.

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-hover">
  ...
</table>

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-hover">
  ...
</table>

بۇ يۆتكىلىشچان قۇرلارنى سىزىقلىق قۇرلار بىلەن بىرلەشتۈرۈشكە بولىدۇ:

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-striped table-hover">
  ...
</table>

ئاكتىپ جەدۋەل

.table-activeدەرس قوشۇش ئارقىلىق جەدۋەل قۇر ياكى كاتەكچىنى گەۋدىلەندۈرۈڭ .

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@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>

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@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-striped-columnsthe تەگلىكنى رەڭلەش ئۈچۈن يېرىم سۈزۈك رەڭگە تەڭشەلدى..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جەدۋەل ۋە كاتەكچىلەرنىڭ ھەممە تەرىپىگە چېگرا قوشۇڭ .

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-bordered">
  ...
</table>

رەڭ ئۆزگەرتىش ئۈچۈن چېگرا رەڭ ئەسلىھەلىرىنى قوشقىلى بولىدۇ:

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

جەدۋەلسىز جەدۋەل

.table-borderlessچېگراسىز جەدۋەلنى قوشۇڭ .

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-borderless">
  ...
</table>

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

كىچىك جەدۋەل

بارلىق كاتەكچىلەرنى ئىككىگە بۆلۈپ تېخىمۇ ئىخچاملاش .table-smئۈچۈن قوشۇڭ ..tablepadding

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-sm">
  ...
</table>

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-sm">
  ...
</table>

جەدۋەل گۇرۇپپىلىرى

قېلىن گۇرۇپپىلارنى قوشۇڭ ، جەدۋەل گۇرۇپپىلىرى <thead>ئارىسىدا <tbody>تېخىمۇ <tfoot>قاراڭغۇ .table-group-divider. رەڭنى ئۆزگەرتىش ئارقىلىق رەڭنى خاسلاشتۇرۇڭ border-top-color(بىز ھازىرچە بۇ دەرسلىكنى تەمىنلىيەلمەيمىز).

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

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>ۋە سۈكۈتتىكى ھالەتتە ئۈستىگە توغرىلىنىدۇ. ۋېرتىكال توغرىلاش سىنىپلىرىنى ئىشلىتىپ ئېھتىياجغا قاراپ قايتا توغرىلاڭ.

Heading 1	Heading 2	Heading 3	Heading 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>

Nesting

چېگرا ئۇسلۇبى ، ئاكتىپ ئۇسلۇب ۋە جەدۋەل ۋارىيانتلىرى ئۇلانغان جەدۋەللەرگە ۋارىسلىق قىلمايدۇ.

بىرىنچى

ئاخىرقى

Handle

Mark

Otto

@mdo

Header	Header	Header
A.	بىرىنچى	ئاخىرقى
B.	بىرىنچى	ئاخىرقى
C.	بىرىنچى	ئاخىرقى

Larry

قۇش

@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>

Anatomy

جەدۋەل بېشى

جەدۋەل ۋە قېنىق ئۈستەللەرگە ئوخشاش ، ئۆزگەرتكۈچ سىنىپىنى ئىشلىتىڭ ياكى .table-lights سۇس ياكى قېنىق كۈلرەڭ كۆرۈنۈڭ..table-dark<thead>

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry	قۇش	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry	قۇش	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

جەدۋەل پۇت

#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry	قۇش	@twitter
Footer	Footer	Footer	Footer

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

خەتلەر

جەدۋەلنىڭ ماۋزۇسىغا <caption>ئوخشاش ئىقتىدارلار. ئۇ ئېكران ئوقۇرمەنلىرى بار ئىشلەتكۈچىلەرنىڭ جەدۋەل تېپىشى ۋە ئۇنىڭ نېمە ئىش ئىكەنلىكىنى چۈشىنىشى ۋە ئۇنى ئوقۇماقچى ياكى ئەمەسلىكىنى قارار قىلىشىغا ياردەم بېرىدۇ.

ئىشلەتكۈچى تىزىملىكى
#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<caption>ئۈستەلنى ئۈستەلنىڭ ئۈستىگە قويسىڭىزمۇ بولىدۇ .caption-top.

ئىشلەتكۈچى تىزىملىكى
#	بىرىنچى	ئاخىرقى	Handle
1	Mark	Otto	@mdo
2	ياقۇپ	Thornton	@fat
3	Larry	قۇش	@twitter

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	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

بۆسۈش نۇقتىسى كونكرېت

ئېھتىياجغا ئاساسەن ئىشلىتىپ .table-responsive{-sm|-md|-lg|-xl|-xxl}، مەلۇم بىر نۇقتىغا قەدەر ئىنكاس جەدۋىلى ھاسىل قىلىڭ. بۇ نۇقتىدىن يۇقىرىغا قاراپ ، جەدۋەل نورمال ھەرىكەت قىلىدۇ ۋە توغرىسىغا توغرىلانمايدۇ.

بۇ جەدۋەللەر ئۇلارنىڭ ئىنكاس ئۇسلۇبى ئالاھىدە كۆرۈنۈش كەڭلىكىدە قوللىنىلغۇچە بۇزۇلغاندەك كۆرۈنۈشى مۇمكىن.

#	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ	ماۋزۇ
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<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>

Sass

ئۆزگەرگۈچى مىقدار

$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%;

Loop

$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ئۆزگەرگۈچى مىقدار تەرىپىدىن نۇرلىنىدۇ.