Source

Tebul dɛn

Dokumɛnt ɛn ɛgzampul dɛn fɔ opt-in stayl fɔ tebul dɛn (giv dɛn prɛvalɛnt yus na JavaSkript plɔgin dɛn) wit Bootstrap.

Ɛgzampul dɛn

Bikɔs ɔf di bɔku bɔku yus fɔ tebul dɛn akɔdin to tɔd-pati widget dɛn lɛk kalenda ɛn de pikka dɛn, wi dɔn disayn wi tebul dɛn fɔ bi opt-in . Jɔs ad di bays klas .tableto ɛni wan <table>, dɔn ɛkstɛnd wit kɔstɔm stayl dɛn ɔ wi difrɛn inklud modifya klas dɛn.

Yuz di mɔs besik tebul mak, na ya aw .table-based tebul dɛn de luk na Bootstrap. Ɔl di tebul stayl dɛn gɛt inhɛrit insay Bootstrap 4 , we min se ɛni tebul we dɛn dɔn nɛst go stayl di sem we lɛk di mama ɔ papa.

# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Lari bin de tɔk di Bɔd @twitter na di 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>

Yu kin invayt di kɔlɔ dɛn bak—wit layt tɛks na dak bakgrɔn—wit .table-dark.

# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Lari bin de tɔk di Bɔd @twitter na di 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>

Tebul ed opshɔn dɛn

Semweso lɛk tebul ɛn dak tebul, yuz di modifya klas dɛn .thead-lightɔ .thead-darkfɔ mek <thead>s tan lɛk layt ɔ dak grey.

# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Lari bin de tɔk di Bɔd @twitter na di twitter
# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Lari bin de tɔk di Bɔd @twitter na di 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>

Row dɛn we gɛt strɛp

Yuz .table-stripedfɔ ad zibra-strip to ɛni tebul row insay di <tbody>.

# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Lari bin de tɔk di Bɔd @twitter na di 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>
# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Lari bin de tɔk di Bɔd @twitter na di 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>

Tebul we gɛt bɔda

Ad .table-borderedfɔ bɔda dɛn na ɔl di say dɛn na di tebul ɛn di sɛl dɛn.

# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Larry di Bɔd @twitter na di 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>
# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Larry di Bɔd @twitter na di 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>

Row dɛn we dɛn kin hov

Add .table-hoverfɔ ɛnabul wan hova stet pan tebul row dɛn insay wan <tbody>.

# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Larry di Bɔd @twitter na di 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>
# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Larry di Bɔd @twitter na di 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>

Smɔl tebul

Ad .table-smfɔ mek tebul dɛn kɔmpakt mɔ bay we yu kɔt sɛl pad insay af.

# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Larry di Bɔd @twitter na di 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>
# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Larry di Bɔd @twitter na di 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>

Klas dɛn we de tɔk bɔt di kɔntɛks

Yuz kɔntɛkstual klas fɔ kala tebul rɔw ɔ wan wan sɛl dɛn.

Klas Di edlayn Di edlayn
Wok Sɛl Sɛl
Balans Sɛl Sɛl
Fɔs Sɛl Sɛl
Sɛkɔndari Sɛl Sɛl
Go bifo Sɛl Sɛl
Denja Sɛl Sɛl
Wɔnin Sɛl Sɛl
Info Sɛl Sɛl
Layt Sɛl Sɛl
Dak Sɛl Sɛl 
<!-- 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>

Rigyul tebul bakgrɔn vayriɔnt dɛn nɔ de wit di dak tebul, bɔt, yu kin yuz tɛks ɔ bakgrɔn yutiliti fɔ ajɔst di sem kayn stayl dɛn.

# Di wan dɛn we de Di edlayn Di edlayn
1. Di wan dɛn we de Sɛl Sɛl
2. Di wan dɛn we de Sɛl Sɛl
3. Di wan dɛn we de Sɛl Sɛl
4. Di wan dɛn we de Sɛl Sɛl
5. Di wan dɛn we de Sɛl Sɛl
6. Di wan dɛn we de Sɛl Sɛl
7. 7. Di wan dɛn we de wok Sɛl Sɛl
8. Di wan dɛn we de Sɛl Sɛl
9. Di wan dɛn we de Sɛl Sɛl 
<!-- 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>
Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp

Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .sr-onlyklas.

Krio rispɔnsiv tebul dɛn bay we yu rap ɛni wan .tablewit .table-responsive{-sm|-md|-lg|-xl}, mek di tebul skrol ɔrizɔntal wan na ɛni max-widthbrekpɔynt we go rich (bɔt nɔ inklud) 576px, 768px, 992px, ɛn 1120px, rispɛktful wan.

Notis se bikɔs brawza dɛn nɔ de sɔpɔt rɛnj kɔntɛks kwɛstyɔn dɛn naw , wi de wok rawnd di limiteshɔn dɛn fɔ min-ɛn max-prɛfiks ɛn viupɔt dɛn wit frakshɔn wid (we kin apin ɔnda sɔm kɔndishɔn dɛn na ay-dpi divays dɛn, fɔ ɛgzampul) bay we wi de yuz valyu dɛn wit ay prɛsishɔn fɔ dɛn kɔmpiashɔn dɛn ya .

Kapshɔn dɛn

A <caption>de wok lɛk ed fɔ tebul. I de ɛp pipul dɛn we gɛt skrin rida fɔ fɛn tebul ɛn ɔndastand wetin i de tɔk bɔt ɛn disayd if dɛn want fɔ rid am.

Lista fɔ di wan dɛn we de yuz am
# Di wan dɛn we de Fɔs Las Sɔlv
1. Di wan dɛn we de Mak Ɔto bin de @mdo na @mdo
2. Di wan dɛn we de Jekɔb Tɔntɔn @bɔmp
3. Di wan dɛn we de Lari bin de tɔk di Bɔd @twitter na di 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>

Tebul dɛn we de ansa

Tebul dɛn we de ansa kin mek dɛn ebul fɔ skrol tebul dɛn ɔrizɔntal wan wit izi wan. Mek ɛni tebul we de ansa akɔdin to ɔl di viupɔt dɛn bay we yu rap wan .tablewit .table-responsive. Ɔ, pik wan maksimal brekpoint wit we yu go gɛt tebul we de ansa to bay we yu yuz .table-responsive{-sm|-md|-lg|-xl}.

Vɛtikal klipin/trɔnkɛshɔn

Tebul dɛn we de ansa kin yuz overflow-y: hidden, we kin klip ɛnitin we de insay di tebul we de dɔŋ ɔ ɔp. Na mɔtalman, dis kin klip ɔf drɔpdɔwn mɛnyu dɛn ɛn ɔda tɔd-pati widget dɛn.

Ɔltɛm we de ansa

Akɔs ɛvri brekpoint, yuz .table-responsivefɔ ɔrizɔntal skrol tebul dɛn.

# Di wan dɛn we de Di edlayn Di edlayn Di edlayn Di edlayn Di edlayn Di edlayn Di edlayn Di edlayn Di edlayn
1. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl
2. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl
3. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl Sɛl 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Brekpoint spɛsifi k

Yuz .table-responsive{-sm|-md|-lg|-xl}as nid de fɔ mek tebul dɛn we de ansa te to wan patikyula brek pɔynt. Frɔm da brek-point de ɛn ɔp, di tebul go biev nɔmal wan ɛn i nɔ go skrol ɔrizɔntal wan.

# Di wan dɛn we de Di edlayn Di edlayn Di edlayn Di edlayn Di edlayn
1. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
2. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
3. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
# Di wan dɛn we de Di edlayn Di edlayn Di edlayn Di edlayn Di edlayn
1. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
2. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
3. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
# Di wan dɛn we de Di edlayn Di edlayn Di edlayn Di edlayn Di edlayn
1. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
2. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
3. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
# Di wan dɛn we de Di edlayn Di edlayn Di edlayn Di edlayn Di edlayn
1. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
2. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl
3. Di wan dɛn we de Sɛl Sɛl Sɛl Sɛl Sɛl 
<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>