Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
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 Upoko Upoko
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 akomanga 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 whakakorikori , 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 hei whakakai i nga pūtau ripanga. Ma tenei ara, ka kore 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
1 Mark Otto @mdo
Pane Pane Pane
A Tuatahi Whakamutunga
B Tuatahi Whakamutunga
C Tuatahi Whakamutunga
3 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 o te hina, te hina pouri ranei.

# 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 kimi i tetahi ripanga me te mohio he aha te korero me te whakatau mehemea 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.

# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
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 tonu 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.

# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
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
# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
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
# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
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
# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
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
# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
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
# Upoko Upoko Upoko Upoko Upoko Upoko Upoko Upoko
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 tauwehe ( $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.