Source

Emmeeza

Ebiwandiiko n'ebyokulabirako by'okulonda-mu sitayiro y'emmeeza (okusinziira ku nkozesa yazo emanyiddwa mu JavaScript plugins) ne Bootstrap.

Eby’okulabirako

Olw’okukozesa ennyo emmeeza mu widget z’abantu ab’okusatu nga kalenda n’abalonda ennaku, tukoze emmeeza zaffe okubeera ez’okwesalirawo . Just add the base class .tableto any <table>, olwo ogaziye n'emisono egy'enjawulo oba kiraasi zaffe ez'enjawulo eziteekeddwamu modifier.

Nga okozesa akabonero k'emmeeza akasinga obukulu, wuuno engeri .table-emmeeza ezisinziira ku ngeri gye zirabika mu Bootstrap. Emisono gyonna egy’emmeeza gisikira mu Bootstrap 4 , ekitegeeza nti emmeeza zonna eziteekeddwa mu kisenge zijja kukolebwa sitayiro mu ngeri y’emu ng’omuzadde.

# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>

Osobola n’okukyusa langi —ng’olina ebiwandiiko ebitangaavu ku bifaananyi ebiddugavu —n’okozesa .table-dark.

# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>

Enkola z’omutwe gw’emmeeza

Okufaananako n’emmeeza n’emmeeza enzirugavu, kozesa ebika by’ebikyusa .thead-lightoba .thead-darkokufuula <thead>s okulabika ng’enzirugavu enzirugavu oba enzirugavu.

# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @twitter
# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>

Ennyiriri eziriko emisono

Kozesa .table-stripedokwongera ku zebra-striping ku lunyiriri lwonna olw'emmeeza munda mu <tbody>.

# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>
# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>

Emmeeza eriko ensalosalo

Gattako .table-borderedfor borders ku njuyi zonna ez'emmeeza n'obutoffaali.

# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>
# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>

Ennyiriri eziyinza okuwuuma

Okwongerako .table-hoverokusobozesa embeera ya hover ku nnyiriri z'emmeeza munda mu <tbody>.

# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>
# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>

Emmeeza entono

Okwongerako .table-smokufuula emmeeza okubeera enzibu ng’osala cell padding mu bitundu bibiri.

# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>
# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>

Ebisulo ebikwata ku mbeera

Kozesa kiraasi ezikwata ku mbeera okukuba langi ku nnyiriri z’emmeeza oba obutoffaali obw’enjawulo.

Essomo Omutwe Omutwe
Obunyiikivu Ekatoffaali Ekatoffaali
Okukosamu Ekatoffaali Ekatoffaali
Pulayimale Ekatoffaali Ekatoffaali
Ekyokubiri Ekatoffaali Ekatoffaali
Okuyita Ekatoffaali Ekatoffaali
Akabi Ekatoffaali Ekatoffaali
Okulabula Ekatoffaali Ekatoffaali
Info Ekatoffaali Ekatoffaali
Koleeza Ekatoffaali Ekatoffaali
Ekizikiza Ekatoffaali Ekatoffaali 
<!-- 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>

Enkyukakyuka z'emabega w'emmeeza eza bulijjo teziriiwo na mmeeza enzirugavu, naye, oyinza okukozesa ebikozesebwa mu biwandiiko oba eby'emabega okutuuka ku sitayiro ezifaanagana.

# . Omutwe Omutwe
1. Ekatoffaali Ekatoffaali
2. Ekatoffaali Ekatoffaali
3. Ekatoffaali Ekatoffaali
4. Ekatoffaali Ekatoffaali
5. Ekatoffaali Ekatoffaali
6. Ekatoffaali Ekatoffaali
7. Ekatoffaali Ekatoffaali
8. Ekatoffaali Ekatoffaali
9. Ekatoffaali Ekatoffaali 
<!-- 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>
Okutuusa amakulu mu tekinologiya ayamba

Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .sr-onlykiraasi.

Tonda emmeeza eziddamu ng’ozinga yonna .tablene .table-responsive{-sm|-md|-lg|-xl}, ng’okola emmeeza okutambula mu bbanga ku buli kifo max-widtheky’okumenyawo okutuuka ku (naye nga tobaliddemu) 576px, 768px, 992px, ne 1120px, mu kulondako.

Weetegereze nti okuva browsers mu kiseera kino teziwagira range context queries , tukola okwetoloola obukwakkulizo bwa min-ne max-prefixes ne viewports ne fractional widths (ebiyinza okubaawo wansi w’embeera ezimu ku high-dpi devices, okugeza) nga tukozesa values ​​n’obutuufu obw’oku ntikko ku kugeraageranya kuno .

Ebigambo ebiwandiikiddwa ku bigambo

A <caption>ekola nga omutwe gw’emmeeza. Kiyamba abakozesa abalina screen readers okuzuula emmeeza n’okutegeera kye kikwatako ne basalawo oba baagala okugisoma.

Olukalala lw'abakozesa
# . Okusooka Okusembayo Okukwaata
1. Mark Otto bwe yabadde @mdo
2. Yakobo Thornton nga bwe kiri @obunene
3. Larry Ekinyonyi @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>

Emmeeza eziddamu

Emmeeza eziddamu zisobozesa emmeeza okutambula mu bbanga mu ngeri ennyangu. Fuula emmeeza yonna okuddamu mu bifo byonna eby'okulaba ng'ozinga a .tablene .table-responsive. Oba, londa ekifo ekisinga obunene eky’okumenyawo kw’olina okuba n’emmeeza eddamu okutuukako ng’okozesa .table-responsive{-sm|-md|-lg|-xl}.

Okusala/okusalako mu ngeri eyeesimbye

Emmeeza eziddamu zikozesa overflow-y: hidden, esalako ebirimu byonna ebisukka wansi oba waggulu ku mbiriizi z’emmeeza. Okusingira ddala, kino kiyinza okusalako menu ezikka wansi ne widgets endala ez’ekibiina eky’okusatu.

Bulijjo addamu

Across buli breakpoint, kozesa .table-responsiveku horizontally scrolling emmeeza.

# . Omutwe Omutwe Omutwe Omutwe Omutwe Omutwe Omutwe Omutwe Omutwe
1. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
2. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
3. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint eyeetongodde

Kozesa .table-responsive{-sm|-md|-lg|-xl}nga bwe kyetaagisa okukola emmeeza eziddamu okutuuka ku kifo ekimu eky’okumenyawo. Okuva ku kifo ekyo eky’okumenya n’okudda waggulu, emmeeza ejja kweyisa mu ngeri eya bulijjo so si kutambula mu bbanga.

# . Omutwe Omutwe Omutwe Omutwe Omutwe
1. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
2. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
3. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
# . Omutwe Omutwe Omutwe Omutwe Omutwe
1. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
2. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
3. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
# . Omutwe Omutwe Omutwe Omutwe Omutwe
1. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
2. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
3. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
# . Omutwe Omutwe Omutwe Omutwe Omutwe
1. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
2. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali
3. Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali Ekatoffaali 
<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>