މައިގަނޑު ކޮންޓެންޓަށް ސްކިޕް ކުރާށެވެ ޑޮކްސް ނެވިގޭޝަނަށް ސްކިޕް ކުރާށެވެ
in English

މޭޒުތަކެވެ

ބޫޓްސްޓްރެޕް އާއި އެކު ޓޭބަލްތަކުގެ އޮޕްޓް-އިން ސްޓައިލިންގ އަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް (ޖާވާސްކްރިޕްޓް ޕްލަގިންސްތަކުގައި އާންމުކޮށް ބޭނުންކުރާ ގޮތަށް ބަލާއިރު) .

އޯވަރވިއު

<table>ކެލެންޑަރާއި ތާރީޚު ހޮވާ ފަދަ ތިންވަނަ ފަރާތެއްގެ ވިޖެޓްތަކުގެ ތެރެއިން އެލިމެންޓްތައް ފުޅާދާއިރާއެއްގައި ބޭނުންކުރުމުގެ ސަބަބުން ، ބޫޓްސްޓްރެޕްގެ ޓޭބަލްތައް އޮޕްޓް-އިން ވެއެވެ . .tableއެއްވެސް އެއްޗަކަށް ބޭސް ކްލާސް <table>އިތުރުކޮށް، ދެން އަޅުގަނޑުމެންގެ އިޚްތިޔާރީ މޮޑިފައި ކްލާސް ނުވަތަ ކަސްޓަމް ސްޓައިލްތަކާއެކު އެކްސްޓެންޑް ކޮށްލާށެވެ. ހުރިހާ ޓޭބަލް ސްޓައިލްތަކަކީ ބޫޓްސްޓްރެޕްގައި ވާރުތަވާ ސްޓައިލްތަކެއް ނޫން ކަމުގައި ވާއިރު، މާނައަކީ އެއްވެސް ނެސްޓް ޓޭބަލްއެއް ބެލެނިވެރިޔާގެ ކިބައިން މިނިވަންކޮށް ސްޓައިލް ކުރެވިދާނެއެވެ.

އެންމެ އަސާސީ ޓޭބަލް މާކަޕް ބޭނުންކޮށްގެން، މިއީ .tableބޫޓްސްޓްރެޕްގައި -ބޭސްޑް ޓޭބަލްތައް ފެންނަ ގޮތެވެ.

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @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>

ވައްތަރުތައް

ޓޭބަލްތަކާއި، ޓޭބަލް ރޯތަކާއި ނުވަތަ ވަކިވަކި ސެލްތަކަށް ކުލަ ޖައްސަން ކޮންޓެކްސްޗުއަލް ކްލާސްތައް ބޭނުންކުރުން.

ކްލާސް ސުރުޚީ ސުރުޚީ
ޑީފޯލްޓް ސެލް ސެލް
އިބްތިދާއީ ސެލް ސެލް
ސެކަންޑަރީ އެވެ ސެލް ސެލް
ކާމިޔާބު ސެލް ސެލް
ނުރައްކާ ސެލް ސެލް
އިންޒާރު ސެލް ސެލް
މަޢުލޫމާތު ސެލް ސެލް
އަލި ސެލް ސެލް
އަނދިރި ސެލް ސެލް
<!-- 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>
އެހީތެރި ޓެކްނޮލޮޖީތަކަށް މާނަ ފޯރުކޮށްދިނުން

މާނަ އިތުރުކުރުމަށް ކުލަ ބޭނުންކުރުމަކީ ހަމައެކަނި ވިޝުއަލް އިންޑިކޭޝަނެއް ލިބިގެންދާ ކަމެއް ކަމަށާއި، އެއީ އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް - ސްކްރީން ރީޑަރ ފަދަ ތަކެތި - ފޯރުކޮށްނުދޭނެ ކަމެއް ކަމަށެވެ. ކުލައިން ދައްކުވައިދޭ މަޢުލޫމާތަކީ ޚުދު ކޮންޓެންޓުން (މިސާލަކަށް ފެންނަ ލިޔުން) ސާފު މަޢުލޫމާތެއްކަން، ނުވަތަ ކްލާހާއެކު ފޮރުވިފައިވާ އިތުރު ލިޔުން ފަދަ ބަދަލު ގޮތްތަކުން ހިމަނާފައިވާ މަޢުލޫމާތެއްކަން ޔަޤީންކުރުން .visually-hidden.

އެކްސެންޓް ޖަހާފައިވާ މޭޒުތަކެވެ

ސްޓްރައިޕްޑް ރޯސްތަކެކެވެ

.table-stripedގެ ތެރޭގައިވާ ކޮންމެ ޓޭބަލް ރޯއަކަށް ޒީބްރާ-ސްޓްރައިޕިންގ އިތުރުކުރުމަށް ބޭނުންކުރާށެވެ <tbody>.

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-striped">
  ...
</table>

މި ކްލާސްތައް ޓޭބަލް ވައްތަރުތަކަށް ވެސް އިތުރުކުރެވިދާނެއެވެ:

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-dark table-striped">
  ...
</table>
# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-success table-striped">
  ...
</table>

ހޯވަރ ކުރެވޭ ރޯތަކެވެ

.table-hoverގެ ތެރޭގައި ހުންނަ ޓޭބަލް ރޯތަކުގައި ހޯވަރ ސްޓޭޓެއް އެނެބަލް ކުރުމަށް އިތުރުކުރުން <tbody>.

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-hover">
  ...
</table>
# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-dark table-hover">
  ...
</table>

މި ހޯވަރެބަލް ރޯތައް ސްޓްރައިޕްޑް ވެރިއަންޓާ ވެސް ގުޅުވައިލެވިދާނެ އެވެ:

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-striped table-hover">
  ...
</table>

އެކްޓިވް ޓޭބަލްތަކެވެ

.table-activeކްލާހެއް އިތުރުކޮށްގެން ޓޭބަލް ރޯއެއް ނުވަތަ ސެލްއެއް ހައިލައިޓް ކުރާށެވެ .

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @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>
# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @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>

ވައްތަރުތަކާއި އެކްސެންޓް ޖަހާފައިވާ ޓޭބަލްތައް މަސައްކަތް ކުރަނީ ކިހިނެއް ހެއްޔެވެ؟

އެކްސެންޓް ކުރެވިފައިވާ ޓޭބަލްތަކަށް ( ސްޓްރައިޕްޑް ރޯސް , ހޯވަރެބަލް ރޯސް , އަދި އެކްޓިވް ޓޭބަލްސް ) ) އަޅުގަނޑުމެންގެ ހުރިހާ ޓޭބަލް ވައްތަރުތަކަށް މި އިފެކްޓްތައް މަސައްކަތް ކުރުމަށް ބައެއް އުކުޅުތައް ބޭނުންކުރިން :

  • އަޅުގަނޑުމެން ފަށަނީ --bs-table-bgކަސްޓަމް ޕްރޮޕަޓީއާއެކު ޓޭބަލް ސެލްއެއްގެ ބެކްގްރައުންޑް ސެޓްކޮށްގެންނެވެ. އެއަށްފަހު ހުރިހާ ޓޭބަލް ވެރިއަންޓްތަކެއް އެ ކަސްޓަމް ޕްރޮޕަޓީ ސެޓްކޮށް ޓޭބަލް ސެލްތައް ކުލަ ޖައްސާށެވެ. މިގޮތަށް ސެމީ ޓްރާންސްޕޭރެންޓް ކުލަތައް ޓޭބަލް ބެކްގްރައުންޑްގެ ގޮތުގައި ބޭނުންކޮށްފިނަމަ އަޅުގަނޑުމެންނަށް އުނދަގުލަކަށް ނުޖެހެއެވެ.
  • ދެން އަޅުގަނޑުމެން ޓޭބަލް ސެލްތަކުގެ މައްޗަށް އިންސެޓް ބޮކްސް ޝެޑޯއެއް އިތުރުކުރަނީ box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ކަނޑައެޅިފައިވާ އެއްވެސް އެއްޗެއްގެ މައްޗަށް ޓޫ ލޭޔަރ އެއް ޖަހާފައި background-color. އަޅުގަނޑުމެން ބޭނުންކުރަނީ ބޮޑު ސްޕްރެޑެއް ކަމަށާއި ބްލަރ އެއް ނެތްތީ، ކުލަ ވާނީ މޮނޮޓޯން އަށެވެ. ޑިފޯލްޓްކޮށް އަންސެޓް ކުރެވޭތީ --bs-table-accent-bg، އަޅުގަނޑުމެންގެ އަތުގައި ޑިފޯލްޓް ބޮކްސް ޝެޑޯއެއް ނެތެވެ.
  • .table-striped, ނުވަތަ ކްލާސްތައް އިތުރުކުރާއިރު، .table-hoverބެކްގްރައުންޑް ކުލަ ޖައްސާލުމަށްޓަކައި ސެމީޓްރާންސްޕޭރެންޓް ކުލައަކަށް ސެޓް ކުރެވެއެވެ..table-active--bs-table-accent-bg
  • ކޮންމެ ޓޭބަލް ވެރިއަންޓަކަށް، އަޅުގަނޑުމެން --bs-table-accent-bgއެ ކުލައަށް ބަލައިގެން އެންމެ މަތީ ކޮންޓްރެސްޓް ހުންނަ ކުލައެއް އުފައްދަމެވެ. މިސާލަކަށް ފޯ އަށް އެކްސެންޓް ކުލަ .table-primaryއަނދިރި ވާއިރު .table-darkއެކްސެންޓް ކުލަ ފަނޑުވެފައި ހުރެއެވެ.
  • ޓެކްސްޓާއި ބޯޑަރ ކުލަތައް އުފެދެނީ އެއްގޮތަކަށް ކަމަށާއި، އެ ކުލަތައް ޑިފޯލްޓްކޮށް ވާރުތަވާ ކަމަށެވެ.

މަންޒަރުތަކުގެ ފަހަތުން ފެންނަނީ މިގޮތަށެވެ:

@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));

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

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

މޭޒު ބޯޑަރުތައް

ބޯޑަރު ޖަހާފައިވާ މޭޒުތަކެވެ

.table-borderedތާވަލާއި ގޮޅިތަކުގެ ހުރިހާ ފަރާތެއްގައި ހުންނަ ބޯޑަރުތަކަށް އިތުރުކުރުން .

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-bordered">
  ...
</table>

ކުލަ ބަދަލުކުރުމަށް ބޯޑަރ ކުލަ ޔުޓިލިޓީސް އިތުރުކުރެވިދާނެ:

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-bordered border-primary">
  ...
</table>

ބޯޑަރެއް ނެތް މޭޒުތަކެވެ

.table-borderlessބޯޑަރެއް ނެތް މޭޒަކަށް އިތުރުކޮށްލާށެވެ .

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-borderless">
  ...
</table>
# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-dark table-borderless">
  ...
</table>

ކުދި މޭޒުތަކެވެ

ހުރިހާ ސެލްއެއް ދެބައިކޮށްލާފައި އިތުރަށް ކޮމްޕެކްޓް .table-smކުރުމަށް އަޅާށެވެ ..tablepadding

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-sm">
  ...
</table>
# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-dark table-sm">
  ...
</table>

ވަރުގަދަ އެލައިންމަންޓް

ޓޭބަލް ސެލްސް އޮފް <thead>އަބަދުވެސް ހުންނަނީ ތިރިއަށް ވަށައިގެން ވަށައިގެން ޖައްސާފައެވެ. ޓޭބަލް ސެލްތައް އިން <tbody>އިންހެރިޓް ކުރަނީ އެމީހުންގެ އެލައިންމަންޓް އިން <table>އަދި އެލައިން ކުރެވެނީ ޑިފޯލްޓްކޮށް މައްޗަށް. ބޭނުންވާ ތަންތަނުގައި އަލުން އެލައިން ކުރުމަށް ވަރުގަދަ އެލައިން ކްލާސްތައް ބޭނުން ކުރާށެވެ .

ސުރުޚީ 1 ސުރުޚީ 2 ސުރުޚީ 3 ސުރުޚީ 4
މި ގޮޅިން ވާރުތަވަނީ vertical-align: middle;ތާވަލުންނެވެ މި ގޮޅިން ވާރުތަވަނީ vertical-align: middle;ތާވަލުންނެވެ މި ގޮޅިން ވާރުތަވަނީ vertical-align: middle;ތާވަލުންނެވެ މިއީ މިތަނުގައި ކޮންމެވެސް ޕްލޭސްހޯލްޑަރ ޓެކްސްޓެއް، ފުދޭވަރަކަށް ވަރުގަދަ ޖާގައެއް ނެގުމަށް ނިޔަތްގަނެފައިވާ، ކުރީގެ ގޮޅިތަކުގައި ވަރުގަދަ އެލައިންމަންޓް މަސައްކަތްކުރާ ގޮތް ދައްކާލުމަށްޓަކައެވެ.
މި ސެލް އިންހެރިޓް vertical-align: bottom;ކުރަނީ ޓޭބަލް ރޯ އިންނެވެ މި ސެލް އިންހެރިޓް vertical-align: bottom;ކުރަނީ ޓޭބަލް ރޯ އިންނެވެ މި ސެލް އިންހެރިޓް vertical-align: bottom;ކުރަނީ ޓޭބަލް ރޯ އިންނެވެ މިއީ މިތަނުގައި ކޮންމެވެސް ޕްލޭސްހޯލްޑަރ ޓެކްސްޓެއް، ފުދޭވަރަކަށް ވަރުގަދަ ޖާގައެއް ނެގުމަށް ނިޔަތްގަނެފައިވާ، ކުރީގެ ގޮޅިތަކުގައި ވަރުގަދަ އެލައިންމަންޓް މަސައްކަތްކުރާ ގޮތް ދައްކާލުމަށްޓަކައެވެ.
މި ގޮޅިން ވާރުތަވަނީ vertical-align: middle;ތާވަލުންނެވެ މި ގޮޅިން ވާރުތަވަނީ vertical-align: middle;ތާވަލުންނެވެ މި ސެލް ހުންނަނީ މަތިން އެއްވަރުކޮށްފައެވެ. މިއީ މިތަނުގައި ކޮންމެވެސް ޕްލޭސްހޯލްޑަރ ޓެކްސްޓެއް، ފުދޭވަރަކަށް ވަރުގަދަ ޖާގައެއް ނެގުމަށް ނިޔަތްގަނެފައިވާ، ކުރީގެ ގޮޅިތަކުގައި ވަރުގަދަ އެލައިންމަންޓް މަސައްކަތްކުރާ ގޮތް ދައްކާލުމަށްޓަކައެވެ.
<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>

ވަޅުލުން

ބޯޑަރ ސްޓައިލްސް، އެކްޓިވް ސްޓައިލްސް، އަދި ޓޭބަލް ވެރިއަންޓްސް އަކީ ނެސްޓް ޓޭބަލްތަކުން ވާރުތަވާ އެއްޗެއް ނޫނެވެ.

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
ހެޑަރ އެވެ ހެޑަރ އެވެ ހެޑަރ އެވެ
އ ފުރަތަމަ އެންމެ ފަހު
ބ ފުރަތަމަ އެންމެ ފަހު
ސީ ފުރަތަމަ އެންމެ ފަހު
3 ލާރީ އެވެ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

ނެސްޓިންގ މަސައްކަތް ކުރާ ގޮތް

ނެސްޓް ޓޭބަލްތަކަށް އެއްވެސް ސްޓައިލެއް ލީކުވުން ހުއްޓުވުމަށްޓަކައި ، >އަޅުގަނޑުމެންގެ ސީއެސްއެސްގައި ބޭނުންކުރަނީ ޗައިލްޑް ކޮމްބިނޭޓަރ ( ) ސެލެކްޓަރ އެވެ. އަޅުގަނޑުމެންނަށް , , އަދި ގައިވާ ހުރިހާ tds އަދި s އަށް ޓާގެޓް ކުރަން ޖެހޭތީ ، އަޅުގަނޑުމެންގެ ސެލެކްޓަރ އެއާ ނުލައި ކިތަންމެހާވެސް ދިގުކޮށް ފެންނާނެ. އެގޮތުން، އަޅުގަނޑުމެން ބޭނުންކުރަނީ ތަންކޮޅެއް އޯޑް ލޫކިންގ ސެލެކްޓަރ އަށް ޓާގެޓް ކުރުމަށް , އެކަމަކު އެއްވެސް ޕޮޓެންޝަލް ނެސްޓް ޓޭބަލް އެއް ނޫނެވެ.ththeadtbodytfoot.table > :not(caption) > * > *tdth.table

<tr>ތާވަލެއްގެ ސީދާ ކުދިންގެ ގޮތުގައި s އިތުރުކޮށްފިނަމަ ، އެކަންކަން ޑިފޯލްޓްކޮށް <tr>a ގައި އޮޅާލެވޭނެކަން ފާހަގަކޮށް <tbody>، އަޅުގަނޑުމެންގެ ސެލެކްޓަރުތައް ގަސްތުކުރި ގޮތަށް މަސައްކަތް ކުރެވޭނެއެވެ.

އެނަޓޮމީ އެވެ

މޭޒު ބޮލެވެ

ޓޭބަލްތަކާއި ކަޅު ޓޭބަލްތަކާ އެއްގޮތަށް، މޮޑިފައި ކްލާސްތައް .table-lightނުވަތަ s ފަނޑު ނުވަތަ ގަދަ އަޅިކުލައިން ފެންނަ .table-darkގޮތަށް ހެދުމަށް ބޭނުން ކުރާށެވެ.<thead>

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލާރީ އެވެ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލާރީ އެވެ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

މޭޒުމަތީ ފައި

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލާރީ އެވެ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
ފޫޓަރ އެވެ ފޫޓަރ އެވެ ފޫޓަރ އެވެ ފޫޓަރ އެވެ
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

ކެޕްޝަންތައް

އޭ <caption>ފަންކްޝަން ކުރަނީ ޓޭބަލްއަކަށް ހެޑިންގ އެއް ފަދައިންނެވެ. އެއީ ސްކްރީން ރީޑަރސް ގެންގުޅޭ ޔޫޒަރުންނަށް ޓޭބަލްއެއް ހޯދައި، އެއީ ކޮން އެއްޗެއްކަން ދެނެގަނެ، އެ ޓޭބަލް ކިޔަން ބޭނުންވާތޯ ނިންމުމަށް އެހީތެރިވެދޭ އެއްޗެކެވެ.

ޔޫޒަރުންގެ ލިސްޓް
# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<caption>އަދި މޭޒުގެ މަތީގައި ވެސް ޖައްސާލެވިދާނެ އެވެ .caption-top.

ޔޫޒަރުންގެ ލިސްޓް
# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލާރީ އެވެ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<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>

ޖަވާބުދާރީވާ މޭޒުތަކެވެ

ރެސްޕޮންސިވް ޓޭބަލްތަކުގެ ސަބަބުން ފަސޭހަކަމާއެކު ޓޭބަލްތައް ހޮރޮޒޮންޓަލީ ސްކްރޯލް ކުރެވޭނެއެވެ. ކޮންމެ ޓޭބަލެއް ވެސް ހުރިހާ ވިއުޕޯޓްތަކެއް ހުރަސްކޮށް ރެސްޕޮންސިވް ކޮށްލައްވާ އެއް .tableއާއެކު ވަށާލައިގެންނެވެ .table-responsive. ނުވަތަ، ބޭނުންކޮށްގެން ރެސްޕޮންސިވް ޓޭބަލް އެއް އޮންނަން ޖެހޭ އެންމެ ބޮޑު ބްރޭކްޕޮއިންޓެއް ހޮވާށެވެ .table-responsive{-sm|-md|-lg|-xl|-xxl}.

ވަރުގަދަ ކްލިޕް/ޓްރަންކޭޝަން

ރެސްޕޮންސިވް ޓޭބަލްތަކުގައި ބޭނުންކުރަނީ overflow-y: hidden, މިއީ ޓޭބަލްގެ ތިރީ ނުވަތަ މަތީ ފަރާތްތަކުން ބޭރަށް ދާ ކޮންމެ ކޮންޓެންޓެއް ކްލިޕްކޮށްލާ އެއްޗެކެވެ. ޚާއްޞަކޮށް، މިއީ ޑްރޮޕްޑައުން މެނޫތަކާއި އެހެނިހެން ތިންވަނަ ފަރާތެއްގެ ވިޖެޓްތައް ކްލިޕް އޮފް ކުރެވޭނެ ގޮތެކެވެ.

އަބަދުވެސް ރައްދުދޭ

ކޮންމެ ބްރޭކްޕޮއިންޓެއް ހުރަސްކޮށް، .table-responsiveހޮރައިޒޮންޓަލީ ސްކްރޯލް ކުރާ ޓޭބަލްތަކަށް ބޭނުން ކުރާށެވެ.

# ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ
1 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
2 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
3 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ބްރޭކްޕޮއިންޓް ސްޕެސިފިކް

.table-responsive{-sm|-md|-lg|-xl|-xxl}ވަކި ބްރޭކްޕޮއިންޓަކަށް ރެސްޕޮންސިވް ޓޭބަލްތައް އުފެއްދުމަށް ބޭނުންވާ ގޮތަށް ބޭނުންކުރުން . އެ ބްރޭކްޕޮއިންޓުން ފެށިގެން މައްޗަށް ޓޭބަލް އާދައިގެ ގޮތަކަށް ކަންތައް ކުރާނެ ކަމަށާއި ހޮރޮޒޮންޓަލީ ސްކްރޯލް ނުކުރާނެ ކަމަށް ވެސް ވިދާޅުވި އެވެ.

މި ޓޭބަލްތައް ވަކި ވިއުޕޯޓް ފުޅާމިންތަކެއްގައި އެ ޓޭބަލްތަކުގެ ރެސްޕޮންސިވް ސްޓައިލްތައް އަމަލުކުރަންދެން ފަޅައިގެން ގޮސްފައިވާ ކަމަށް ފެނިދާނެއެވެ.

# ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ
1 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
2 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
3 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
# ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ
1 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
2 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
3 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
# ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ
1 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
2 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
3 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
# ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ
1 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
2 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
3 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
# ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ
1 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
2 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
3 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
# ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ ސުރުޚީ
1 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
2 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
3 ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް ސެލް
<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>

ސާސް އެވެ

ވެރިއޭބަލްސް އެވެ

$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:                 $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:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

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

$table-bg-scale:              -80%;

ލޫޕް

$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,
);

ކަސްޓަމައިޒް ކުރުން

  • ޓޭބަލް ވެރިއަންޓްތަކުގައި ހުންނަ ކޮންޓްރެސްޓް ކަނޑައެޅުމަށް ބޭނުންކުރަނީ ފެކްޓަރ ވެރިއޭބަލްސް ( $table-striped-bg-factor, $table-active-bg-factor& ) އެވެ.$table-hover-bg-factor
  • ލައިޓް އެންޑް ޑާކް ޓޭބަލް ވައްތަރުތަކުގެ އިތުރުން ތީމް ކުލަތައް ލުއިކޮށްދެނީ $table-bg-levelވެރިއޭބަލް އިންނެވެ.