Source

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.

Tauira

Na te kaha o te whakamahi i nga ripanga puta noa i nga widget-tuatoru penei i nga maramataka me nga kaikokoti ra, kua hangaia e matou o matou ripanga kia uru mai . Taapiri noa te karaehe turanga .tableki tetahi <table>, katahi ka toro atu me nga momo ritenga me o taatau momo karaehe whakarereke.

Ma te whakamahi i te tohu ripanga tino taketake, koinei te ahua o .tablenga ripanga-a-ringa ki Bootstrap. Ko nga momo ripanga katoa he mea tuku iho ki Bootstrap 4 , ko te tikanga ko nga ripanga kohanga ka rite ki te ahua o te matua.

#	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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Ka taea hoki e koe te huri i nga tae—me nga kupu marama i runga i nga papamuri pouri—me te .table-dark.

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

Nga whiringa upoko ripanga

He rite ki nga tepu me nga tepu pouri, whakamahia nga karaehe whakarereke .thead-light, .thead-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

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

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

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

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

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

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

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

Tepu iti

Taapirihia .table-smkia pai ake ai nga teepu ma te tapahi i nga papaa pūtau kia haurua.

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

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

Nga karaehe horopaki

Whakamahia nga karaehe horopaki ki te kara i nga rarangi ripanga me nga pūtau takitahi.

Karaehe	Upoko	Upoko
Hohe	Pūtau	Pūtau
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 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>

Ko nga rereke papamuri tepu auau kaore i te waatea me te tepu pouri, heoi, ka taea e koe te whakamahi tuhinga, taputapu papamuri ranei hei whakatutuki i nga momo ahua.

#	Upoko	Upoko
1	Pūtau	Pūtau
2	Pūtau	Pūtau
3	Pūtau	Pūtau
4	Pūtau	Pūtau
5	Pūtau	Pūtau
6	Pūtau	Pūtau
7	Pūtau	Pūtau
8	Pūtau	Pūtau
9	Pūtau	Pūtau

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

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 .sr-onlyakomanga.

Waihangahia nga ripanga urupare ma te takai i tetahi .tableki te .table-responsive{-sm|-md|-lg|-xl}, kia panuku whakapae te ripanga ki ia max-widthwaahi wehenga ki runga (engari kaua e uru) 576px, 768px, 992px, me te 1120px, ia.

Kia mahara, i te mea kaore nga kaitirotiro e tautoko i nga patai horopaki awhe i tenei wa , ka mahi maatau i nga herenga min-me max-nga prefix me nga tauranga tirohanga me nga whanui hautau (ka puta i raro i etahi ahuatanga i runga i nga taputapu Dpi teitei, hei tauira) ma te whakamahi i nga uara e tino tika ana mo enei whakataurite. .

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">
  <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}.

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

#	Upoko	Upoko	Upoko	Upoko	Upoko
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

#	Upoko	Upoko	Upoko	Upoko	Upoko
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

#	Upoko	Upoko	Upoko	Upoko	Upoko
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

#	Upoko	Upoko	Upoko	Upoko	Upoko
1	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
2	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau
3	Pūtau	Pūtau	Pūtau	Pūtau	Pūtau

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