in English

Clàir

Sgrìobhainnean agus eisimpleirean airson stoidhle roghnach de chlàran (seach gu bheil iad air an cleachdadh gu cumanta ann am plugins JavaScript) le Bootstrap.

Air an duilleig seo

Ro-shealladh

Mar thoradh air an cleachdadh farsaing de <table>eileamaidean thairis air widgets treas-phàrtaidh leithid mìosachain agus luchd-togail cinn-latha, tha bùird Bootstrap a’ tarraing a-steach . Cuir a’ bhun-chlas .tableri gin <table>, an uairsin leudaich leis na clasaichean atharrachaidh roghainneil againn no na stoidhlichean àbhaisteach againn. Chan eil a h-uile stoidhle bùird air an sealbhachadh ann am Bootstrap, a’ ciallachadh gum faodar bùird neadachaidh sam bith a stialladh gu neo-eisimeileach bhon phàrant.

A’ cleachdadh a’ chomharra bùird as bunaitiche, seo mar .tablea choimheadas bùird stèidhichte ann am Bootstrap.

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
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>

Caochlaidhean

Cleachd clasaichean co-theacsa gus bùird, sreathan bùird no ceallan fa leth a dhath.

Clas	Ceann-cinnidh	Ceann-cinnidh
Deònach	cill	cill
Bun-sgoil	cill	cill
Àrd-sgoile	cill	cill
Soirbheachas	cill	cill
Cunnart	cill	cill
Rabhadh	cill	cill
Fiosrachadh	cill	cill
Solas	cill	cill
Dorch	cill	cill

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

A’ toirt brìgh do theicneòlasan cuideachail

Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ris ach a’ toirt seachad sealladh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil fiosrachadh air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (me an teacsa faicsinneach), no air a thoirt a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .visually-hiddenchlas.

Clàran teann

Sreathan stiallach

Cleachd .table-stripedgus stiallan zebra a chur ri sreath bùird sam bith taobh a-staigh an fhaidhle <tbody>.

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Colbhan stiallach

Cleachd .table-striped-columnsgus stiallan zebra a chur ri colbh bùird sam bith.

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Faodar na clasaichean sin a chur ri caochlaidhean bùird cuideachd:

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Sreathan sùbailte

Cuir .table-hoverris gus staid hover a chomasachadh air sreathan bùird taobh a-staigh faidhle <tbody>.

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Faodar na sreathan so-ruigsinneach seo a chur còmhla ris an tionndadh sreathan stiallach:

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Clàr gnìomhach

Thoir cuideam air sreath bùird no cealla le bhith a’ cur .table-activeclas ris.

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
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>

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
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>

Ciamar a tha na caochlaidhean agus clàran le stràc ag obair?

Airson na bùird le stràc ( sreathan stiallach , colbhan stiallach , sreathan so -ruigsinneach , agus clàran gnìomhach ), chleachd sinn cuid de dhòighean gus toirt air na buaidhean seo obrachadh airson na caochlaidhean bùird againn uile :

Bidh sinn a’ tòiseachadh le bhith a’ suidheachadh cùl cealla bùird leis an t --bs-table-bg-seilbh àbhaisteach. Bidh a h-uile caochladair bùird an uairsin a’ suidheachadh an t-seilbh àbhaisteach sin gus na ceallan bùird a dhath. San dòigh seo, cha bhith sinn ann an trioblaid ma thèid dathan leth-fhollaiseach a chleachdadh mar chùl-raointean bùird.
An uairsin cuiridh sinn sgàile bogsa a-steach air na ceallan bùird le box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);còmhdach air mullach faidhle sam bith a chaidh a shònrachadh background-color. Leis gu bheil sinn a’ cleachdadh sgaoileadh mòr agus gun blur, bidh an dath monotone. Leis gu bheil --bs-table-accent-bge neo-shuidhichte gu bunaiteach, chan eil sgàil bogsa bunaiteach againn.
Nuair a thèid an dàrna cuid .table-striped, .table-striped-columns, .table-hoverno .table-activeclasaichean a chur ris, tha --bs-table-accent-bge air a shuidheachadh gu dath semitransparent gus an cùl-raon a dhath.
Airson gach caochladair bùird, bidh sinn a’ gineadh --bs-table-accent-bgdath leis an eadar-dhealachadh as àirde a rèir an dath sin. Mar eisimpleir, tha an dath stràc airson .table-primarynas dorcha fhad ‘s .table-darka tha dath stràc nas aotroime air.
Bithear a’ gineadh dathan teacsa is crìche san aon dòigh, agus tha na dathan aca air an sealbhachadh gu bunaiteach.

Air cùl na seallaidhean tha e a’ coimhead mar seo:

@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);
  }
}

Crìochan bùird

Bùird crìche

Cuir ris .table-borderedairson crìochan air gach taobh den bhòrd agus na ceallan.

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Faodar goireasan dath crìche a chuir ris gus dathan atharrachadh:

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Clàran gun chrìochan

Cuir ris .table-borderlessairson bòrd gun chrìochan.

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Clàran beaga

Cuir .table-smris gus a dhèanamh .tablenas cruaidhe le bhith a 'gearradh a h-uile cealla paddingann an leth.

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Luchd-sgaraidh buidheann clàr

Cuir crìoch nas doimhne, nas dorcha eadar buidhnean bùird - <thead>, <tbody>, agus <tfoot>-le .table-group-divider. Gnàthaich an dath le bhith ag atharrachadh an border-top-color(nach eil sinn a’ toirt seachad clas goireis dha aig an àm seo).

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
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>

Co-thaobhadh dìreach

Tha ceallan clàr an <thead>-còmhnaidh co-thaobhadh dìreach ris a’ bhonn. Bidh ceallan clàr a’ <tbody>sealbhachadh an co-thaobhadh bhon <table>mhullach agus air an co-thaobhadh ris a’ mhullach gu bunaiteach. Cleachd na clasaichean co- thaobhadh dìreach gus ath-thaobhadh far a bheil feum air.

Ceann-uidhe 1	Ceann-uidhe 2	Ceann-uidhe 3	Ceann-uidhe 4
Tha an cealla seo a’ sealbhachadh `vertical-align: middle;`bhon chlàr	Tha an cealla seo a’ sealbhachadh `vertical-align: middle;`bhon chlàr	Tha an cealla seo a’ sealbhachadh `vertical-align: middle;`bhon chlàr	Seo cuid de theacsa neach-àite an seo, a thathar an dùil a bhith a’ gabhail suas beagan rùm dìreach, gus sealltainn mar a tha an co-thaobhadh dìreach ag obair anns na ceallan roimhe seo.
Tha an cealla seo a’ sealbhachadh `vertical-align: bottom;`bhon t-sreath bùird	Tha an cealla seo a’ sealbhachadh `vertical-align: bottom;`bhon t-sreath bùird	Tha an cealla seo a’ sealbhachadh `vertical-align: bottom;`bhon t-sreath bùird	Seo cuid de theacsa neach-àite an seo, a thathar an dùil a bhith a’ gabhail suas beagan rùm dìreach, gus sealltainn mar a tha an co-thaobhadh dìreach ag obair anns na ceallan roimhe seo.
Tha an cealla seo a’ sealbhachadh `vertical-align: middle;`bhon chlàr	Tha an cealla seo a’ sealbhachadh `vertical-align: middle;`bhon chlàr	Tha an cealla seo co-thaobhadh ris a’ mhullach.	Seo cuid de theacsa neach-àite an seo, a thathar an dùil a bhith a’ gabhail suas beagan rùm dìreach, gus sealltainn mar a tha an co-thaobhadh dìreach ag obair anns na ceallan roimhe seo.

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

A' neadachadh

Chan eil stoidhlichean crìche, stoidhlichean gnìomhach, agus caochlaidhean bùird air an sealbhachadh le bùird neadachaidh.

A’ chiad

Mu dheireadh

Làimhseachadh

Marc

Otto

@meadh

Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
A	A’ chiad	Mu dheireadh
B	A’ chiad	Mu dheireadh
c	A’ chiad	Mu dheireadh

Larry

an Eòin

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Mar a tha neadachadh ag obair

Gus casg a chuir air stoidhlichean sam bith bho bhith ag aoidion gu bùird neadachaidh, bidh sinn a’ cleachdadh an >roghnaiche combinator ( ) cloinne anns an CSS againn. Leis gu feum sinn a bhith ag amas air a h-uile tds agus ths anns an thead, tbody, agus tfoot, bhiodh an roghnaichear againn a’ coimhead gu math fada às aonais. .table > :not(caption) > * > *Mar sin, bidh sinn a’ cleachdadh an roghnaiche caran neònach gus cuimseachadh air a h td- uile clàr thden .table, ach chan eil gin de na bùird neadachaidh a dh’ fhaodadh a bhith ann.

Thoir an aire ma chuireas tu <tr>s ris mar chlann dìreach air bòrd, <tr>bidh iad sin air am pasgadh a-steach gu <tbody>bunaiteach, mar sin a’ toirt air ar luchd-taghaidh obrachadh mar a bha dùil.

Anatomy

Ceann-bùird

Coltach ri bùird agus clàran dorcha, cleachd na clasaichean mion-atharrachaidh .table-lightno .table-darkgus toirt air <thead>s nochdadh liath aotrom no dorcha.

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry	an Eòin	@twitter

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

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry	an Eòin	@twitter

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

Cois-bùird

#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry	an Eòin	@twitter
bonn-coise	bonn-coise	bonn-coise	bonn-coise

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

Fo-thiotalan

Tha <caption>gnìomh mar cheann airson bòrd. Bidh e a’ cuideachadh luchd-cleachdaidh le leughadairean sgrion gus clàr a lorg agus tuigsinn cò mu dheidhinn a tha e agus co-dhùnadh a bheil iad airson a leughadh.

Liosta de luchd-cleachdaidh
#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Faodaidh tu cuideachd am faidhle a chuir <caption>air mullach a’ bhùird le .caption-top.

Liosta de luchd-cleachdaidh
#	A’ chiad	Mu dheireadh	Làimhseachadh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry	an Eòin	@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>

Clàran freagairteach

Bidh bùird fhreagarrach a’ leigeil le bùird a bhith air an gluasad gu còmhnard gu furasta. Dèan bòrd sam bith freagairteach thairis air a h-uile sealladh le bhith a’ pasgadh a .tablele .table-responsive. No, tagh an ìre as àirde airson clàr freagairteach a bhith agad le bhith a’ cleachdadh .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Gearradh dìreach / giorrachadh

Bidh bùird fhreagarrach a’ cleachdadh overflow-y: hidden, a bhios a’ gearradh dheth susbaint sam bith a tha a’ dol seachad air oirean ìosal no àrd a’ bhùird. Gu sònraichte, faodaidh seo clàran-bìdh tuiteam-sìos agus widgets treas-phàrtaidh eile a ghearradh dheth.

An-còmhnaidh freagairteach

Thar gach puing-bhriseadh, cleachd .table-responsiveairson bùird scrollaidh gu còmhnard.

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill	cill	cill	cill	cill

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

Breakpoint sònraichte

Cleachd .table-responsive{-sm|-md|-lg|-xl|-xxl}mar a dh’ fheumar gus bùird freagairteach a chruthachadh suas gu àite brisidh sònraichte. Bhon ìre briseadh sin agus suas, bidh am bòrd gad ghiùlan fhèin gu h-àbhaisteach agus cha bhith e a’ gluasad gu còmhnard.

Dh’ fhaodadh gun nochd na clàran sin briste gus am bi na stoidhlichean freagairteach aca a’ buntainn ri leudan seallaidh sònraichte.

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill	cill	cill	cill

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill	cill	cill	cill

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill	cill	cill	cill

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill	cill	cill	cill

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill	cill	cill	cill

#	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh	Ceann-cinnidh
1	cill	cill	cill	cill	cill	cill	cill	cill
2	cill	cill	cill	cill	cill	cill	cill	cill
3	cill	cill	cill	cill	cill	cill	cill	cill

<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

Caochlaidhean

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

Lùb

$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,
);

Gnàthachadh

Tha na caochladairean bàillidh ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) air an cleachdadh gus an eadar-dhealachadh ann an caochlaidhean bùird a dhearbhadh.
A bharrachd air na caochlaidhean bùird aotrom is dorcha, tha dathan cuspair air an lasadh leis a’ $table-bg-scalechaochladair.