Source

Awọn tabili

Awọn iwe aṣẹ ati awọn apẹẹrẹ fun ijade ni iselona ti awọn tabili (fifun lilo lilo wọn ni awọn afikun JavaScript) pẹlu Bootstrap.

Awọn apẹẹrẹ

Nitori lilo awọn tabili ni ibigbogbo kọja awọn ẹrọ ailorukọ ẹnikẹta bi awọn kalẹnda ati awọn oluyan ọjọ, a ti ṣe apẹrẹ awọn tabili wa lati wọle . Kan ṣafikun kilasi ipilẹ .tablesi eyikeyi <table>, lẹhinna fa pẹlu awọn aṣa aṣa tabi awọn kilasi iyipada ti o wa pẹlu ọpọlọpọ.

Lilo isamisi tabili ipilẹ julọ, eyi ni bii awọn .tabletabili orisun ṣe wo ni Bootstrap. Gbogbo awọn aza tabili ni a jogun ni Bootstrap 4 , afipamo pe awọn tabili itẹ-ẹiyẹ eyikeyi yoo jẹ aṣa ni ọna kanna bi obi.

# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>

O tun le yi awọn awọ pada-pẹlu ọrọ ina lori awọn ipilẹ dudu-pẹlu .table-dark.

# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>

Awọn aṣayan ori tabili

Iru awọn tabili ati awọn tabili dudu, lo awọn kilasi modifier .thead-lighttabi .thead-darklati jẹ ki <thead>s han ina tabi grẹy dudu.

# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @twitter
# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>

Awọn ori ila ti o ya

Lo .table-stripedlati ṣafikun abila-fikun si ori ila tabili eyikeyi laarin <tbody>.

# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>
# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>

Tabili aala

Fi kun .table-borderedfun awọn aala lori gbogbo awọn ẹgbẹ ti tabili ati awọn sẹẹli.

# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>
# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>

Hoverable awọn ori ila

Fikun -un .table-hoverlati mu ipo fifin ṣiṣẹ lori awọn ori ila tabili laarin faili kan <tbody>.

# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>
# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>

Kekere tabili

Fikun -un .table-smlati ṣe awọn tabili ni iwapọ diẹ sii nipa gige fifẹ sẹẹli ni idaji.

# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>
# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>

Awọn kilasi asọye

Lo awọn kilasi ọrọ-ọrọ lati ṣe awọ awọn ori ila tabili tabi awọn sẹẹli kọọkan.

Kilasi Akori Akori
Ti nṣiṣe lọwọ Ẹyin sẹẹli Ẹyin sẹẹli
Aiyipada Ẹyin sẹẹli Ẹyin sẹẹli
Alakoko Ẹyin sẹẹli Ẹyin sẹẹli
Atẹle Ẹyin sẹẹli Ẹyin sẹẹli
Aseyori Ẹyin sẹẹli Ẹyin sẹẹli
Ijamba Ẹyin sẹẹli Ẹyin sẹẹli
Ikilo Ẹyin sẹẹli Ẹyin sẹẹli
Alaye Ẹyin sẹẹli Ẹyin sẹẹli
Imọlẹ Ẹyin sẹẹli Ẹyin sẹẹli
Dudu Ẹyin sẹẹli Ẹyin sẹẹli 
<!-- 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>

Awọn iyatọ ipilẹ tabili deede ko si pẹlu tabili dudu, sibẹsibẹ, o le lo ọrọ tabi awọn ohun elo abẹlẹ lati ṣaṣeyọri awọn aza ti o jọra.

# Akori Akori
1 Ẹyin sẹẹli Ẹyin sẹẹli
2 Ẹyin sẹẹli Ẹyin sẹẹli
3 Ẹyin sẹẹli Ẹyin sẹẹli
4 Ẹyin sẹẹli Ẹyin sẹẹli
5 Ẹyin sẹẹli Ẹyin sẹẹli
6 Ẹyin sẹẹli Ẹyin sẹẹli
7 Ẹyin sẹẹli Ẹyin sẹẹli
8 Ẹyin sẹẹli Ẹyin sẹẹli
9 Ẹyin sẹẹli Ẹyin sẹẹli 
<!-- 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>
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .sr-onlykilasi naa.

Ṣẹda awọn tabili idahun nipa fifisilẹ eyikeyi .tablepẹlu .table-responsive{-sm|-md|-lg|-xl}, ṣiṣe tabili yi lọ ni ita ni aaye fifọ kọọkan max-widthti o to (ṣugbọn kii ṣe pẹlu) 576px, 768px, 992px, ati 1120px, lẹsẹsẹ.

Ṣe akiyesi pe niwọn igba ti awọn aṣawakiri ko ṣe atilẹyin awọn ibeere ipo ipo lọwọlọwọ , a ṣiṣẹ ni ayika awọn aropin ti min-ati awọn max-asọtẹlẹ ati awọn iwo wiwo pẹlu awọn iwọn ida (eyiti o le waye labẹ awọn ipo kan lori awọn ẹrọ dpi giga, fun apẹẹrẹ) nipa lilo awọn iye pẹlu konge giga fun awọn afiwera wọnyi .

Awọn akọle

Awọn <caption>iṣẹ kan bi akọle fun tabili kan. O ṣe iranlọwọ fun awọn olumulo pẹlu awọn oluka iboju lati wa tabili kan ati loye ohun ti o jẹ nipa ati pinnu boya wọn fẹ ka.

Akojọ ti awọn olumulo
# Akoko Ikẹhin Mu
1 Samisi Otto @mdo
2 Jakobu Thornton @sanra
3 Larry Eye @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>

Awọn tabili idahun

Awọn tabili idahun gba awọn tabili laaye lati yi lọ ni ita pẹlu irọrun. Jẹ ki tabili eyikeyi ṣe idahun kọja gbogbo awọn ibudo wiwo nipa fifi ipari si .tablepẹlu .table-responsive. Tabi, mu aaye isinmi ti o pọju pẹlu eyiti o le ni tabili idahun si nipa lilo .table-responsive{-sm|-md|-lg|-xl}.

Inaro clipping/truncation

Awọn tabili idahun ṣe lilo overflow-y: hidden, eyi ti awọn agekuru kuro ni eyikeyi akoonu ti o lọ kọja isalẹ tabi awọn egbegbe oke ti tabili. Ni pataki, eyi le ge awọn akojọ aṣayan silẹ ati awọn ẹrọ ailorukọ ẹnikẹta miiran.

Idahun nigbagbogbo

Kọja gbogbo aaye fifọ, lo .table-responsivefun awọn tabili lilọ kiri ni petele.

# Akori Akori Akori Akori Akori Akori Akori Akori Akori
1 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
2 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
3 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint pato

Lo .table-responsive{-sm|-md|-lg|-xl}bi o ṣe nilo lati ṣẹda awọn tabili idahun titi de aaye fifọ kan pato. Lati ibi fifọ yẹn ati si oke, tabili yoo huwa deede kii yoo yi lọ ni ita.

# Akori Akori Akori Akori Akori
1 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
2 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
3 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
# Akori Akori Akori Akori Akori
1 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
2 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
3 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
# Akori Akori Akori Akori Akori
1 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
2 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
3 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
# Akori Akori Akori Akori Akori
1 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
2 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli
3 Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli Ẹyin sẹẹli 
<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>