Source

Iitafile

Amaxwebhu kunye nemizekelo yokukhetha ukungena kwisitayile seetafile (kunikwe usetyenziso oluxhaphakileyo kwiiplagi zeJavaScript) ngeBootstrap.

Imizekelo

Ngenxa yokusetyenziswa ngokubanzi kweetheyibhile kuzo zonke iiwijethi zomntu wesithathu ezifana neekhalenda kunye nabakhethi bemihla, siyile iitafile zethu ukuba zingene . Yongeza nje iklasi yesiseko .tablekuyo nayiphi na <table>, emva koko wandise ngezitayile zesiko okanye iiklasi zethu ezahlukeneyo ezibandakanyiweyo zokulungisa.

Usebenzisa olona phawu lusisiseko lwetafile, nantsi indlela-esekwe njani .tableiitafile kwiBootstrap. Zonke izimbo zetafile zizuzwe kwi-Bootstrap 4 , okuthetha ukuba naziphi na iitafile ezibekwe kwindlwane ziya kwenziwa ngendlela efanayo nomzali.

# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>

Unako kwakhona ukuguqula imibala-ngombhalo okhanyayo kwimvelaphi emnyama-nge .table-dark.

# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>

Iinketho zentloko yetheyibhile

Ngokufana neetafile kunye neetafile ezimnyama, sebenzisa iiklasi zesilungisi .thead-lightokanye .thead-darkukwenza <thead>s kubonakale ukukhanya okanye grey emnyama.

# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @twitter
# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>

Imiqolo enemigca

Sebenzisa .table-stripedukudibanisa zebra-striping kuwo nawuphi na umqolo wetafile ngaphakathi kwe <tbody>.

# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>
# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>

Itafile enemida

Yongeza .table-borderedimida kumacala onke etafile kunye neeseli.

# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>
# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>

Itafile engenamda

Yongeza .table-borderlessitafile ngaphandle kwemida.

# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @twitter 
<table class="table table-borderless">
  <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>

.table-borderlessinokusetyenziswa nakwiitafile ezimnyama.

# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @twitter 
<table class="table table-borderless 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>

Imiqolo eshukumayo

Yongeza .table-hoverukwenza imo ye hover kwimigca yetafile ngaphakathi kwe <tbody>.

# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>
# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>

Itafile encinci

Yongeza .table-smukwenza iitafile zihlangane ngakumbi ngokusika i-cell padding kwisiqingatha.

# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>
# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>

Iiklasi zomxholo

Sebenzisa iiklasi zomxholo ukufaka imibala kwimigca yetafile okanye iiseli ezizimeleyo.

Iklasi Isihloko Isihloko
Iyasebenza Iseli Iseli
Ukuhlala kukho Iseli Iseli
Amabanga aphantsi Iseli Iseli
Eyesibini Iseli Iseli
Impumelelo Iseli Iseli
Ingozi Iseli Iseli
Isilumkiso Iseli Iseli
Ulwazi Iseli Iseli
Ukukhanya Iseli Iseli
Mnyama Iseli Iseli 
<!-- 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>

Umehluko wemvelaphi yetheyibhile eqhelekileyo ayifumaneki ngetafile emnyama, nangona kunjalo, ungasebenzisa okubhaliweyo okanye okuluncedo okungemva ukufezekisa izimbo ezifanayo.

# Isihloko Isihloko
1 Iseli Iseli
2 Iseli Iseli
3 Iseli Iseli
4 Iseli Iseli
5 Iseli Iseli
6 Iseli Iseli
7 Iseli Iseli
8 Iseli Iseli
9 Iseli Iseli 
<!-- 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>
Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umzekelo, umbhalo obonakalayo), okanye luqukwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .sr-onlyeklasini.

Yenza iitheyibhile eziphendulayo ngokusonga nayiphi na .tablenge .table-responsive{-sm|-md|-lg|-xl}, ukwenza itafile iskrole ngokuthe tye kwindawo nganye max-widthyokwahlukana ukuya (kodwa kungabandakanywa) 576px, 768px, 992px, kunye ne-1120px, ngokulandelelanayo.

Qaphela ukuba njengoko abakhangeli beencwadi okwangoku bengayixhasi imibuzo yomxholo woluhlu , sisebenza malunga nemida min-kunye max-nezimaphambili kunye neendawo zokujonga ezinobubanzi obuqhekekileyo (okwenzeka phantsi kweemeko ezithile kwizixhobo eziphezulu ze-dpi, umzekelo) ngokusebenzisa amaxabiso anochaneka oluphezulu kolu thelekiso. .

Iinkcazelo

Imisebenzi <caption>efana nesihloko setafile. Inceda abasebenzisi abafunda isikrini ukuba bafumane itafile kwaye baqonde ukuba ingantoni kwaye bathathe isigqibo sokuba bafuna ukuyifunda na.

Uluhlu lwabasebenzisi
# Ekuqaleni Okokugqibela Phatha
1 Phawula Otto @mdo
2 uYakobi Thornton @fat
3 Larry intaka @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>

Iitafile eziphendulayo

Iitheyibhile eziphendulayo zivumela iitafile ukuba ziskrolwe ngokuthe tye ngokulula. Yenza nayiphi na itafile iphendule kuzo zonke iindawo zokujonga ngokusonga .tablenge .table-responsive. Okanye, khetha eyona ndawo iphezulu onokuthi ube netafile ephendulayo ukuya kuthi ga ngoku .table-responsive{-sm|-md|-lg|-xl}.

Ukunqunyulwa ngokuthe nkqo/ukunciphisa

Iitheyibhile eziphendulayo zisebenzisa overflow-y: hiddeni-, ekhuphela nawuphi na umxholo ongaphaya komzantsi okanye kumphetho wetafile. Ngokukodwa, oku kunokuqhawula iimenyu ezihlayo kunye nezinye iiwijethi zomntu wesithathu.

Isoloko iphendula

Kuzo zonke iindawo zokuphumla, sebenzisa .table-responsiveiitafile zokuskrola ngokuthe tye.

# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint ethile

Sebenzisa .table-responsive{-sm|-md|-lg|-xl}njengoko kufuneka ukwenza iitafile eziphendulayo ukuya kwindawo ethile yoqhawulo. Ukusuka kuloo ndawo yokuqhekeka ukuya phezulu, itafile iya kuziphatha ngokwesiqhelo kwaye ingasondeli ngokuthe tye.

Ezi theyibhile zinokubonakala zaphukile de izimbo zazo zokuphendula zisebenze kububanzi obuthile bendawo yokujonga.

# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko Isihloko
1 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
2 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli
3 Iseli Iseli Iseli Iseli Iseli Iseli Iseli Iseli 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>