Source

latabatra

Documentation sy ohatra amin'ny fanaovana styling amin'ny latabatra (nomena ny fampiasana azy ireo amin'ny plugins JavaScript) miaraka amin'ny Bootstrap.

OHATRA

Noho ny fiparitahan'ny tabilao manerana ny widgets an'ny antoko fahatelo toy ny kalandrie sy ny mpaka daty, dia namolavola ny latabatray izahay mba hirotsaka hofidiana . Ampio fotsiny ny kilasin'ny fototra .tableamin'ny rehetra <table>, ary ampiharo amin'ny fomba mahazatra na ny kilasy modifier isan-karazany.

Amin'ny fampiasana ny marika latabatra fototra indrindra, ity ny fomba .tablefijerin'ny tabilao mifototra amin'ny Bootstrap. Ny fomban-databatra rehetra dia nolovaina ao amin'ny Bootstrap 4 , midika izany fa ny latabatra misy akany dia hamboarina amin'ny fomba mitovy amin'ny ray aman-dreny.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@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>

Azonao atao koa ny mamadika ny loko — miaraka amin'ny lahatsoratra maivana amin'ny fiaviana maizina — miaraka amin'ny .table-dark.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@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>

Safidy loha latabatra

Mitovy amin'ny latabatra sy ny latabatra maizina, ampiasao ny kilasy modifier .thead-lightna .thead-darkmba hahatonga ny <thead>s ho maivana na maizina.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@twitter

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@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>

Mitsipika mitsipika

Ampiasao .table-stripedmba hanampiana zebra-striping amin'ny andalana latabatra ao anatin'ny <tbody>.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@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>

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@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>

latabatra misy sisin-tany

Ampio .table-borderedny sisin-tany amin'ny lafiny rehetra amin'ny latabatra sy ny sela.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@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>

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@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>

latabatra tsy misy sisintany

Ampio .table-borderlesslatabatra tsy misy sisiny.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@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-borderlessazo ampiasaina amin'ny latabatra maizina ihany koa.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@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>

Andalana hoverable

Ampio .table-hovermba ahafahan'ny toetry ny hover amin'ny andalana latabatra ao anatin'ny <tbody>.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@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>

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@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>

latabatra kely

Ampio .table-smmba hahatonga ny latabatra ho mirindra kokoa amin'ny alalan'ny fanapahana ny padding sela ho antsasany.

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@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>

#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry the Bird		@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>

Kilasy ara-tantara

Mampiasà kilasy contextual handokoana ny andalana latabatra na ny sela tsirairay.

KILASY	sasin-tenin'ny	sasin-tenin'ny
Active	SELA	SELA
toerana misy anao	SELA	SELA
Kilonga	SELA	SELA
faharoa	SELA	SELA
FETY	SELA	SELA
Loza	SELA	SELA
FAMPITANDREMANA	SELA	SELA
Info	SELA	SELA
fahazavana	SELA	SELA
Maizina	SELA	SELA

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

Tsy azo ampiasaina amin'ny latabatra maizina ny variana lafika latabatra mahazatra, na izany aza, azonao atao ny mampiasa fitaovana lahatsoratra na lafika mba hahazoana endrika mitovy.

#	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA
2	SELA	SELA
3	SELA	SELA
4	SELA	SELA
5	SELA	SELA
6	SELA	SELA
7	SELA	SELA
8	SELA	SELA
9	SELA	SELA

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

Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-onlykilasy.

Mamorona tabilao mandray andraikitra amin'ny famenoana ny iray .tablemiaraka amin'ny .table-responsive{-sm|-md|-lg|-xl}, ka ataovy mitsivalana ny latabatra isaky ny max-widthtapatapaka hatramin'ny (fa tsy misy) 576px, 768px, 992px, ary 1120px, tsirairay avy.

Mariho fa satria tsy manohana ny fanontaniana momba ny contexte ny navigateur amin'izao fotoana izao , dia miasa manodidina ny famerana min-sy ny max-prefix ary ny efitra fijerena miaraka amin'ny sakan'ny fractional izahay (izay mety hitranga amin'ny fepetra sasany amin'ny fitaovana avo lenta, ohatra) amin'ny fampiasana sanda manana mari-pahaizana ambony kokoa ho an'ireo fampitahana ireo. .

maribolana

A <caption>miasa toy ny lohatenin'ny latabatra. Izy io dia manampy ireo mpampiasa manana mpamaky efijery hahita latabatra sy hahatakatra ny momba azy ary hanapa-kevitra raha te hamaky izany izy ireo.

Lisitry ny mpampiasa
#	VOALOHANY	FARANY	tahony
1	marika	Otto	@mdo
2	Jakoba	Thornton	@matavy
3	Larry	ny Vorona	@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>

Tabilao mandray andraikitra

Ny tabilao mandray andraikitra dia ahafahan'ny tabilao mihodina mitsivalana mora foana. Ataovy mamaly ny latabatra rehetra manerana ny viewports rehetra amin'ny alàlan'ny fametahana .tableny .table-responsive. Na, mifidiana teboka fiatoana ambony indrindra ahafahana manana latabatra mandray andraikitra amin'ny fampiasana .table-responsive{-sm|-md|-lg|-xl}.

Fampitahana / fanapahana mitsangana

Mampiasa ny tabilao mandray andraikitra ny overflow-y: hidden, izay manaisotra ny atiny rehetra mihoatra ny sisiny ambany na ambony amin'ny latabatra. Indrindra indrindra, ity dia afaka manaisotra ny menio midina sy ny widgets an'ny antoko fahatelo.

mamaly foana

Ampiasaina .table-responsiveamin'ny tabilao mitsivalana mihodinkodina eo amin'ny teboka rehetra.

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

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

Breakpoint manokana

Ampiasao .table-responsive{-sm|-md|-lg|-xl}araka izay ilaina mba hamoronana tabilao mamaly hatramin'ny teboka iray manokana. Manomboka amin'io toerana tapaka io no miakatra, ny latabatra dia handeha amin'ny fomba mahazatra fa tsy hihodina mitsivalana.

Mety ho toa tapaka ireo tabilao ireo mandra-pihatra ny fomba famaliany amin'ny sakan'ny seranan-tsambo manokana.

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

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

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

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

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

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

#	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny	sasin-tenin'ny
1	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
2	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA
3	SELA	SELA	SELA	SELA	SELA	SELA	SELA	SELA

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