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.

Na dis pej

Ɔvaviu fɔ di Baybul

Bikɔs ɔf di bɔku bɔku yus fɔ <table>ɛlimɛnt dɛn akɔdin to tɔd-pati widget dɛn lɛk kalenda ɛn de pik, Bootstrap in tebul dɛn na opt-in . Ad di bays klas .tableto ɛni wan <table>, dɔn ɛkstɛnd wit wi opshɔnal modifya klas dɛn ɔ kɔstɔm stayl dɛn. Ɔl di tebul stayl dɛn nɔ de inhɛrit insay Bootstrap, we min se ɛni tebul we dɛn dɔn nɛst kin stayl indipɛndɛnt frɔm di mama ɔ papa.

Yuz di mɔs besik tebul mak, na ya aw .table-based tebul dɛn de luk na Bootstrap.

# 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">
  <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 difrɛn difrɛn tin dɛn we dɛn kin yuz

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

Klas	Di edlayn	Di edlayn
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

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

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 .visually-hiddenklas.

Tebul dɛn we gɛt aksɛn

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	Larry di Bɔd		@twitter na di twitter

<table class="table table-striped">
  ...
</table>

Kɔlɔm dɛn we gɛt strɛp

Yuz .table-striped-columnsfɔ ad zibra-strip to ɛni tebul kɔlɔm.

# 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-striped-columns">
  ...
</table>

Dɛn kin ad dɛn klas ya bak to di wan dɛn we de na di tebul:

# 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-dark table-striped">
  ...
</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-dark table-striped-columns">
  ...
</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-success table-striped">
  ...
</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-success table-striped-columns">
  ...
</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">
  ...
</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-dark table-hover">
  ...
</table>

Dɛn hoverable rows ya kin kam bak wit di striped rows variant:

# 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-striped table-hover">
  ...
</table>

Tebul dɛn we de wok

Halayt wan tebul row ɔ sɛl bay we yu ad wan .table-activeklas.

# 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">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Aw di difrɛn difrɛn tebul dɛn ɛn di tebul dɛn we gɛt aksɛn kin wok?

Fɔ di aksɛn tebul dɛn ( strɛp rɔw dɛn , strɛp kɔlɔm dɛn , row dɛn we pɔsin kin hova , ɛn aktiv tebul dɛn ), wi yuz sɔm tɛknik dɛn fɔ mek dɛn ifɛkt dɛn ya wok fɔ ɔl wi tebul vayriɔnt dɛn :

Wi kin bigin bay we wi de sɛt di bakgrɔn fɔ wan tebul sɛl wit di --bs-table-bgkɔstɔm prɔpati. Ɔl di tebul vayriɔnt dɛn dɔn sɛt da kɔstɔm prɔpati de fɔ kala di tebul sɛl dɛn. Dis we ya, wi nɔ de gɛt prɔblɛm if dɛn yuz sɛmi-transparent kɔlɔ dɛn as tebul bakgrɔn.
Dɔn wi ad wan insɛt bɔks shado na di tebul sɛl dɛn wit box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layt ɔp ɛni spɛsifikɛd background-color. Bikɔs wi de yuz big big spred ɛn nɔ blɔk, di kɔlɔ go bi wanwɔd. Sins --bs-table-accent-bgna unset bay difɔlt, wi nɔ gɛt difɔlt bɔks shado.
We dɛn ad ɛni wan pan di .table-striped, .table-striped-columns, .table-hoverɔ .table-activeklas dɛn, dɛn --bs-table-accent-bgkin sɛt di wan to wan sɛmitransparent kɔlɔ fɔ mek di bakgrɔn gɛt kɔlɔ.
Fɔ ɛni tebul we difrɛn, wi kin mek wan --bs-table-accent-bgkɔlɔ we gɛt di kɔntrast we pas ɔl dipen pan da kɔlɔ de. Fɔ ɛgzampul, di aksɛn kɔlɔ fɔ .table-primaryde dak we .table-darki gɛt layt aksɛn kɔlɔ.
Dɛn kin mek tɛks ɛn bɔda kɔlɔ dɛn di sem we, ɛn dɛn kin gɛt dɛn kɔlɔ dɛn bay difɔlt.

Bihain di scenes e luk laik dis:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Tebul dɛn bɔda dɛn

Tebul dɛn 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">
  ...
</table>

Yu kin ad bɔda kala yutiliti fɔ chenj kɔlɔ:

# 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 border-primary">
  ...
</table>

Tebul dɛn we nɔ gɛt bɔda

Ad .table-borderlessfɔ wan tebul we nɔ gɛt bɔda.

# 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-borderless">
  ...
</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-dark table-borderless">
  ...
</table>

Smɔl smɔl tebul dɛn

Ad .table-smfɔ mek ɛni .tablemɔ kɔmpakt bay we yu kɔt ɔl di sɛl paddingdɛn na 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">
  ...
</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-dark table-sm">
  ...
</table>

Tebul grup divayda dɛn

Ad wan bɔda we tik, we dak bitwin tebul grup dɛn— <thead>, <tbody>, ɛn <tfoot>—wit .table-group-divider. Kastamayz di kala bay we yu chenj di border-top-color(we wi nɔ de gi yutiliti klas fɔ naw dis tɛm).

# 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

html

<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 class="table-group-divider">
    <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>

Vɛtikal alaynɛshɔn

Tebul sεl dεm fכ <thead>de כltεm vεtikal alaynεd to di bכtכm. Tebul sɛl dɛn in <tbody>inhɛrit dɛn alaynɛshɔn frɔm <table>ɛn dɛn alaynɛd to di ɔp bay difɔlt. Yuz di vertikal alaynɛshɔn klas dɛn fɔ ri-alayn usay nid de.

Di edlayn 1	Di edlayn 2	Di edlayn 3	Di edlayn 4
Dis sɛl de gɛt `vertical-align: middle;`frɔm di tebul	Dis sɛl de gɛt `vertical-align: middle;`frɔm di tebul	Dis sɛl de gɛt `vertical-align: middle;`frɔm di tebul	Dis ya na sɔm pleshɔlda tɛks, we dɛn bin want fɔ tek bɔku vertikal spɛs, fɔ sho aw di vertikal alaynɛshɔn de wok na di sɛl dɛn we de bifo.
Dis sɛl de inhɛrit `vertical-align: bottom;`frɔm di tebul rɔw	Dis sɛl de inhɛrit `vertical-align: bottom;`frɔm di tebul rɔw	Dis sɛl de inhɛrit `vertical-align: bottom;`frɔm di tebul rɔw	Dis ya na sɔm pleshɔlda tɛks, we dɛn bin want fɔ tek bɔku vertikal spɛs, fɔ sho aw di vertikal alaynɛshɔn de wok na di sɛl dɛn we de bifo.
Dis sɛl de gɛt `vertical-align: middle;`frɔm di tebul	Dis sɛl de gɛt `vertical-align: middle;`frɔm di tebul	Dis sɛl de alaynɛd to di ɔp pat.	Dis ya na sɔm pleshɔlda tɛks, we dɛn bin want fɔ tek bɔku vertikal spɛs, fɔ sho aw di vertikal alaynɛshɔn de wok na di sɛl dɛn we de bifo.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Fɔ mek dɛn nɛst

Bɔda stayl dɛn, aktiv stayl dɛn, ɛn tebul we dɛn mek nɔ gɛt tebul dɛn we dɛn dɔn nest.

# 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

Ɛda fɔ di ed	Ɛda fɔ di ed	Ɛda fɔ di ed
WAN	Fɔs	Las
B. Di wan dɛn we de wok	Fɔs	Las
C. Di wan dɛn we de	Fɔs	Las

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>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Aw fɔ mek dɛn nɛst kin wok

Fɔ mek ɛni stayl nɔ lik to tebul dɛn we dɛn dɔn nest, wi de yuz di pikin kɔmbayntɔ ( >) sɛlɛktɔ na wi CSS. Sins wi nid fɔ target ɔl di tds ɛn ths dɛn na di thead, tbody, ɛn tfoot, wi sɛlɛktɔ go luk fayn fayn wan if i nɔ de. As a so, wi yuz di rather odd lukin .table > :not(caption) > * > *selekta fɔ target ɔl di tds ɛn ths dɛn na di .table, bɔt nɔ pan ɛni pɔtɛnɛshɛl nest tebul dɛn.

Notis se if yu ad <tr>s as dairekt pikin dɛn fɔ wan tebul, dɛn wan <tr>dɛn de go rap insay a <tbody>bay difɔlt, so dat go mek wi sɛlɛktɔ dɛn wok lɛk aw dɛn bin want fɔ du am.

Anatomi fɔ di bɔdi

Tebul ed

Semweso lɛk tebul ɛn dak tebul, yuz di modifya klas dɛn .table-lightɔ .table-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

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </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">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Tebul fut

# 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
Fut pat na di fut	Fut pat na di fut	Fut pat na di fut	Fut pat na di fut

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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	Larry di Bɔd		@twitter na di twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Yu kin put di <caption>bak ɔp di tebul wit .caption-top.

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

html

<table class="table caption-top">
  <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|-xxl}.

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|-xxl}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.

Dɛn tebul dɛn ya kin tan lɛk se dɛn dɔn brok te dɛn stayl dɛn we de ansa aplay na sɔm patikyula viupɔt wit dɛn.

# Di wan dɛn we de	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
2. Di wan dɛn we de	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

# Di wan dɛn we de	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
2. Di wan dɛn we de	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

# Di wan dɛn we de	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
2. Di wan dɛn we de	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

# Di wan dɛn we de	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
2. Di wan dɛn we de	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

# Di wan dɛn we de	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
2. Di wan dɛn we de	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

# Di wan dɛn we de	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
2. Di wan dɛn we de	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

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

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

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

Sass we bin de

Di tin dɛn we kin chenj

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}body-color);
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Tay

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Fɔ kɔstɔmayt

Di faktɔ vɛriɔbul dɛn ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) dɛn yuz fɔ no di kɔntrast insay tebul vɛriɔbul dɛn.
Apat frɔm di layt & dak tebul vayriɔnt dɛn, di tim kɔlɔ dɛn layt bay di $table-bg-scalevɛriɔbul.