in English

Ripanga

Ko nga tuhinga me nga tauira mo te whakauru-whakaahua o nga ripanga (i runga i te nuinga o te whakamahi i roto i nga taputapu JavaScript) me Bootstrap.

I tenei wharangi

Tirohanga

Na te kaha o te whakamahi i <table>nga huānga puta noa i nga widget-tuatoru penei i nga maramataka me nga kaikohi ra, ka uru mai nga ripanga a Bootstrap . Taapirihia te karaehe turanga .tableki tetahi <table>, katahi ka toro atu me o maatau karaehe whakarereke, momo ritenga ranei. Ko nga momo ripanga katoa karekau i tuku iho ki Bootstrap, ko te tikanga ka taea te whakaingoa motuhake mai i te matua nga momo ripanga kohanga.

Ma te whakamahi i te tohu ripanga tino taketake, koinei te ahua o .tablenga ripanga-a-ringa ki Bootstrap.

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@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>

Nga momo rereke

Whakamahia nga karaehe horopaki ki te tae i nga ripanga, nga rarangi ripanga, nga pūtau takitahi ranei.

Karaehe	Pane	Pane
Taunoa	Pūtau	Pūtau
Paraimere	Pūtau	Pūtau
Tuarua	Pūtau	Pūtau
Angitu	Pūtau	Pūtau
mōrearea	Pūtau	Pūtau
Whakatupato	Pūtau	Pūtau
Nga korero	Pūtau	Pūtau
Maama	Pūtau	Pūtau
pouri	Pūtau	Pūtau

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

Te kawe i te tikanga ki nga hangarau awhina

Ko te whakamahi i te tae ki te taapiri i te tikanga he tohu tirohanga noa iho, kaore e tukuna ki nga kaiwhakamahi hangarau awhina - penei i nga kaipanui mata. Me mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (hei tauira, te tuhinga ka kitea), ka whakaurua ranei ma etahi atu huarahi, penei i etahi atu tuhinga huna ki te .visually-hiddenakomanga.

Ripanga nako

Nga rarangi tarekare

Whakamahia .table-stripedki te taapiri i te zebra-striping ki tetahi rarangi ripanga i roto i te <tbody>.

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

Ka taea hoki te taapiri i enei karaehe ki nga momo ripanga:

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

Nga rarangi whakamarumaru

Tāpirihia .table-hoverkia taea ai te ahua whakaparo ki nga rarangi ripanga i roto i te <tbody>.

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

Ka taea hoki te whakakotahi i enei rarangi whakakorikori ki te momo purepure:

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

Nga ripanga hohe

Miramirahia he rarangi ripanga, pūtau rānei mā te tāpiri .table-activeakomanga.

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@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>

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@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>

He pehea te mahi o nga momo rereke me nga ripanga nako?

Mo nga ripanga kua tohua ( nga rarangi purepure , rarangi whakamarumaru , me nga ripanga hohe ), i whakamahia e matou etahi tikanga kia pai ai enei paanga ki o maatau momo ripanga katoa :

Ka timata ma te tautuhi i te papamuri o te putau ripanga me te --bs-table-bgtaonga ritenga. Ko nga momo ripanga katoa ka tautuhi i taua taonga ritenga ki te tae ki nga pūtau ripanga. Ma tenei ara, kare tatou e raru mena ka whakamahia nga tae ahua-puataata hei papamuri tepu.
Katahi ka taapirihia he atarangi pouaka whakauru ki runga i nga pūtau tepu me box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);te paparanga ki runga o nga mea kua tohua background-color. Na te mea ka whakamahia e matou he horahanga nui me te kore he kikorangi, ka noho noa te tae. I --bs-table-accent-bgte mea kaore i tautuhia e te taunoa, karekau he atarangi pouaka taunoa.
Ina ka taapirihia nga karaehe .table-striped, he karaehe .table-hoverranei , ka tautuhia te tae ki te tae maramara hei whakakoi i te papamuri..table-active--bs-table-accent-bg
Mo ia momo ripanga, ka whakaputahia e matou he --bs-table-accent-bgtae me te tino rerekee i runga i tera tae. .table-primaryHei tauira, he pouri ake te tae nako mo te mea .table-darkhe maama ake te tae nako.
He rite tonu te hanga o nga tae o te kuputuhi me te taitapa, a ko o raatau tae he mea tuku noa.

I muri i nga whakaaturanga he penei te ahua:

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

Taitapa ripanga

Tepu taitapa

Tāpirihia .table-borderedhe taitapa ki ngā taha katoa o te ripanga me ngā pūtau.

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

Ka taea te taapiri i nga taputapu tae taitapa hei huri i nga tae:

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

Ripanga kore taitapa

Tāpiri .table-borderlessmo te ripanga kore taitapa.

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

Tepu iti

Taapirihia .table-smkia .tabletotika ake ma te tapahi i nga pūtau katoa paddingkia haurua.

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

Tirohanga poutū

Ko nga pūtau ripanga o <thead>he poutū tonu e tirohia ana ki raro. Ko nga pūtau ripanga kei roto i te tuku iho i <tbody>o raatau tirohanga mai i <table>te taha o runga ma te taunoa. Whakamahia nga karaehe tiaaro poutū ki te whakatiaro ano ki nga waahi e tika ana.

Pane 1	Pane 2	Pane 3	Pane 4
Ka tuku iho tenei pūtau `vertical-align: middle;`mai i te ripanga	Ka tuku iho tenei pūtau `vertical-align: middle;`mai i te ripanga	Ka tuku iho tenei pūtau `vertical-align: middle;`mai i te ripanga	Anei etahi o nga kupu whai waahi, he nui te mokowā poutū, hei whakaatu i te mahi o te tīaroaro poutū ki ngā pūtau o mua.
Ka tuku iho tenei pūtau `vertical-align: bottom;`mai i te rarangi ripanga	Ka tuku iho tenei pūtau `vertical-align: bottom;`mai i te rarangi ripanga	Ka tuku iho tenei pūtau `vertical-align: bottom;`mai i te rarangi ripanga	Anei etahi o nga kupu whai waahi, he nui te mokowā poutū, hei whakaatu i te mahi o te tīaroaro poutū ki ngā pūtau o mua.
Ka tuku iho tenei pūtau `vertical-align: middle;`mai i te ripanga	Ka tuku iho tenei pūtau `vertical-align: middle;`mai i te ripanga	Kua tiarohia tenei pūtau ki runga.	Anei etahi o nga kupu whai waahi, he nui te mokowā poutū, hei whakaatu i te mahi o te tīaroaro poutū ki ngā pūtau o mua.

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

Kohanga

Ko nga momo taitapa, nga momo hohe, me nga momo ripanga kaore i riro mai i nga ripanga kohanga.

Tuatahi

Whakamutunga

Kakau

Mark

Otto

@mdo

Pane	Pane	Pane
A	Tuatahi	Whakamutunga
B	Tuatahi	Whakamutunga
C	Tuatahi	Whakamutunga

Larry

te Manu

@twitter

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

Me pehea te mahi kohanga

Kia kore ai e rere nga momo ahua ki nga ripanga kohanga, ka whakamahia e matou te >kaiwhiriwhiri tamariki ( ) i roto i to maatau CSS. I te mea me aro tatou ki nga tds me thnga s katoa i roto i te thead, tbody, me te tfoot, ka tino roa te ahua o to tatou kaiwhiri ki te kore. Na reira, ka whakamahia e matou te kaikowhiri ahua .table > :not(caption) > * > *rerekee ki te aro ki nga tds me thnga s katoa o te .table, engari kaore tetahi o nga ripanga kohanga.

Kia mahara, mena ka taapirihia e koe he <tr>s hei tamariki tika o te tepu, <tr>ka takai ki roto i te <tbody>taunoa, na reira ka mahi to tatou kaikowhiri ki runga i te tikanga.

Anatomy

Te upoko tepu

He rite ki nga tepu me nga tepu pouri, whakamahia nga karaehe whakarereke .table-light, .table-darkkia <thead>maamaa ranei te ahua ki te hina hina.

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@twitter

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

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@twitter

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

Waewae tepu

#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@twitter
Hiku	Hiku	Hiku	Hiku

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

Nga tapanga

He <caption>mahi ano he pane mo te ripanga. Ka awhina i nga kaiwhakamahi me nga kaipanui mata ki te rapu tepu me te mohio he aha te korero me te whakatau mena ka hiahia ratou ki te panui.

Rarangi o nga kaiwhakamahi
#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry te Manu		@twitter

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

Ka taea hoki te whakanoho <caption>ki runga o te tepu me te .caption-top.

Rarangi o nga kaiwhakamahi
#	Tuatahi	Whakamutunga	Kakau
1	Mark	Otto	@mdo
2	ko Hakopa	Toronton	@ngako
3	Larry	te Manu	@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>

Tepu whakautu

Ka taea e nga ripanga urupare te panuku whakapae me te ngawari. Whakaritea tetahi ripanga kia aro ki nga tauranga tirohanga katoa ma te takai i te .tableki .table-responsive. Ranei, kowhiria he waahi wehenga morahi hei whakatakoto i te ripanga urupare ma te whakamahi .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Tope poutū/tapahi

Ka whakamahia e nga ripanga urupare te overflow-y: hidden, ka tope i nga ihirangi kei tua atu i nga tapa o raro, o runga ranei o te ripanga. Ina koa, ka taea e tenei te tango i nga tahua takaiho me etahi atu widget-tuatoru.

He urupare i nga wa katoa

Puta noa i nga waahi pakaru, whakamahia .table-responsivemo nga ripanga panuku whakapae.

#	Pane	Pane	Pane	Pane	Pane	Pane	Pane	Pane	Pane
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

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

Wehenga motuhake

Whakamahia .table-responsive{-sm|-md|-lg|-xl|-xxl}ina hiahiatia hei hanga i nga ripanga urupare tae noa ki tetahi waahi pakaru. Mai i tera waahi pakaru me te piki ake, ka rite te ahua o te ripanga, kaore e panuku whakapae.

Ka pakaru pea enei ripanga kia tae ra ano o raatau momo urupare ki nga whanuitanga tauranga tiro motuhake.

#	Pane	Pane	Pane	Pane	Pane	Pane	Pane	Pane
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

#	Pane	Pane	Pane	Pane	Pane	Pane	Pane	Pane
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

#	Pane	Pane	Pane	Pane	Pane	Pane	Pane	Pane
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

#	Pane	Pane	Pane	Pane	Pane	Pane	Pane	Pane
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

#	Pane	Pane	Pane	Pane	Pane	Pane	Pane	Pane
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

#	Pane	Pane	Pane	Pane	Pane	Pane	Pane	Pane
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

<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

Taurangi

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

Porowhita

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

Whakaritea

Ka whakamahia nga taurangi taurangi ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) ki te whakatau i te rereke o nga rereke ripanga.
I tua atu i nga momo tepu marama me te pouri, ka whakamarama nga tae kaupapa e te $table-bg-leveltaurangi.