Source

Rooj

Cov ntaub ntawv thiab cov piv txwv rau xaiv-hauv styling ntawm cov ntxhuav (muab lawv siv dav hauv JavaScript plugins) nrog Bootstrap.

Piv txwv

Vim muaj kev siv ntau ntawm cov rooj thoob plaws peb-tog widgets xws li daim ntawv qhia hnub thiab hnub xaiv, peb tau tsim peb cov ntxhuav los xaiv . Tsuas yog ntxiv cov chav kawm hauv paus .tablerau ib qho twg <table>, tom qab ntawd txuas nrog cov qauv kev cai lossis peb cov chav kawm hloov kho ntau yam.

Siv cov lus qhia yooj yim tshaj plaws, ntawm no yog li cas .table-raws li cov ntxhuav saib hauv Bootstrap. Txhua lub rooj style tau txais qub txeeg qub teg hauv Bootstrap 4 , txhais tau tias txhua lub rooj nested yuav styled zoo ib yam li niam txiv.

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@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>

Koj tuaj yeem hloov cov xim-nrog cov ntawv teeb ntawm cov keeb kwm yav dhau-nrog .table-dark.

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@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>

Table head xaiv

Zoo ib yam li cov ntxhuav thiab cov ntxhuav tsaus, siv cov chav kawm hloov kho .thead-lightlossis .thead-darkua kom <thead>pom lub teeb lossis tsaus grey.

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@twitter

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@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>

Kab txaij

Siv .table-stripedlos ntxiv zebra-striping rau ib kab lus hauv <tbody>.

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@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>

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@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>

Ciam teb rooj

Ntxiv .table-borderedrau ciam teb rau txhua sab ntawm lub rooj thiab cov hlwb.

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry noog		@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>

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry noog		@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 kab

Ntxiv .table-hoverlos pab kom lub xeev hover ntawm cov kab lus hauv ib <tbody>.

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry noog		@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>

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry noog		@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>

Lub rooj me me

Ntxiv .table-smkom cov ntxhuav ntau compact los ntawm kev txiav cell padding nyob rau hauv ib nrab.

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry noog		@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>

#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry noog		@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>

Cov chav kawm ntawm cov ntsiab lus

Siv cov chav kawm contextual rau xim kab kab los yog ib lub hlwb.

Chav kawm	Lub taub hau	Lub taub hau
Active	Cell	Cell
Default	Cell	Cell
Thawj	Cell	Cell
Secondary	Cell	Cell
Kev vam meej	Cell	Cell
Kev phom sij	Cell	Cell
Ceeb toom	Cell	Cell
Cov ntaub ntawv	Cell	Cell
Teeb	Cell	Cell
Tsaus	Cell	Cell

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

Cov kab lus tsis tu ncua keeb kwm yav dhau los tsis muaj nrog lub rooj tsaus, txawm li cas los xij, koj tuaj yeem siv cov ntawv nyeem lossis cov khoom siv tom qab kom ua tiav cov qauv zoo sib xws.

#	Lub taub hau	Lub taub hau
1	Cell	Cell
2	Cell	Cell
3	Cell	Cell
4	Cell	Cell
5	Cell	Cell
6	Cell	Cell
7	Cell	Cell
8	Cell	Cell
9	Cell	Cell

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

Qhia lub ntsiab lus rau kev pab technologies

Siv cov xim los ntxiv cov ntsiab lus tsuas yog muab qhov pom kev pom, uas yuav tsis raug xa mus rau cov neeg siv cov thev naus laus zis pab - xws li cov ntawv nyeem. Xyuas kom meej tias cov ntaub ntawv qhia los ntawm cov xim yog pom tseeb los ntawm cov ntsiab lus nws tus kheej (xws li cov ntawv pom), lossis suav nrog lwm txoj kev, xws li cov ntawv ntxiv zais nrog cov .sr-onlychav kawm.

Tsim cov lus teb los ntawm kev qhwv ib qho twg .tablenrog .table-responsive{-sm|-md|-lg|-xl}, ua rau lub rooj scroll horizontally ntawm txhua qhov max-widthtawg ntawm mus txog (tab sis tsis suav nrog) 576px, 768px, 992px, thiab 1120px, feem.

Nco ntsoov tias txij li cov browsers tam sim no tsis txhawb ntau cov ntsiab lus nug , peb ua haujlwm nyob ib puag ncig cov kev txwv ntawm min-thiab max-ua ntej thiab cov chaw saib nrog qhov dav dav (uas tuaj yeem tshwm sim nyob rau qee yam ntawm cov khoom siv high-dpi, piv txwv li) los ntawm kev siv cov txiaj ntsig siab dua rau cov kev sib piv no. .

Cov lus piav qhia

Ib <caption>txoj haujlwm zoo li lub taub hau rau lub rooj. Nws pab cov neeg siv nrog cov tshuaj ntsuam nyeem kom pom lub rooj thiab nkag siab tias nws yog dab tsi thiab txiav txim siab seb lawv puas xav nyeem nws.

Daim ntawv teev cov neeg siv
#	Ua ntej	Kawg	tuav
1	Mark	Otto	@mdo
2	Yakhauj	Thornton	@fat
3	Larry	noog	@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>

Cov lus teb

Responsive tables tso cai rau cov ntxhuav tau scrolled horizontally yooj yim. Ua ib lub rooj teb thoob plaws txhua qhov chaw saib los ntawm kev qhwv ib qho .tablenrog .table-responsive. Los yog, xaiv qhov siab tshaj plaws breakpoint uas yuav tsum muaj cov lus teb los ntawm kev siv .table-responsive{-sm|-md|-lg|-xl}.

Vertical clipping/truncation

Cov lus teb ua rau siv overflow-y: hidden, uas clips tawm cov ntsiab lus uas dhau mus rau hauv qab lossis sab saum toj ntawm lub rooj. Tshwj xeeb, qhov no tuaj yeem txiav tawm cov ntawv qhia zaub mov thiab lwm tus neeg thib peb widgets.

Ib txwm teb

Nyob rau hauv txhua rooj plaub, siv .table-responsiverau kab rov tav scrolling rooj.

#	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Breakpoint tshwj xeeb

Siv .table-responsive{-sm|-md|-lg|-xl}raws li xav tau los tsim cov lus teb mus txog rau ib qho kev tawg. Los ntawm qhov tawg thiab nce mus, lub rooj yuav coj li ib txwm thiab tsis scroll horizontally.

#	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau	Lub taub hau
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

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