Source

މޭޒުތަކެވެ

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

މިސާލުތަކެވެ

ކެލެންޑަރާއި ތާރީޚު ހޮވާ ފަދަ ތިންވަނަ ފަރާތެއްގެ ވިޖެޓްތަކުގެ ތެރެއިން ޓޭބަލްތައް ފުޅާދާއިރާއެއްގައި ބޭނުންކުރުމުގެ ސަބަބުން، އަޅުގަނޑުމެންގެ ޓޭބަލްތައް ޑިޒައިންކޮށްފައިވަނީ އޮޕްޓް-އިން އަށެވެ. Just add the base class .tableto any <table>, ދެން ކަސްޓަމް ސްޓައިލްތަކާއެކު ނުވަތަ އަޅުގަނޑުމެންގެ އެކިއެކި ހިމެނޭ މޮޑިފައި ކްލާސްތަކާއެކު އެކްސްޓެންޑް ކޮށްލާށެވެ.

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

# ފުރަތަމަ އެންމެ ފަހު ހިފަހައްޓާތަން
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

އަދި ކުލަތައް އިންވާޓް ކުރެވޭނެ- އަނދިރި ފަސްގަނޑުގައި ފަނޑު ލިޔުމަކާއެކު- އިން ވެސް ކުރެވިދާނެއެވެ .table-dark.

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

މޭޒު ބޮލުގެ އިޚްތިޔާރުތައް

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

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

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

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

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

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

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

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

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

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

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

ކުޑަ މޭޒެއް

.table-smސެލް ޕެޑިންގ ދެބައިކޮށް ކަނޑާލައިގެން މޭޒުތައް އިތުރަށް ކޮމްޕެކްޓް ކުރުމަށް އިތުރު ކުރާށެވެ .

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

ކޮންޓެކްސްޗުއަލް ކްލާސްތަކެވެ

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

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

ގަވާއިދުން ޓޭބަލް ބެކްގްރައުންޑް ވެރިއަންޓްސް ޑާކް ޓޭބަލް އާއި އެކު ނުލިބޭ ނަމަވެސް، އެއްގޮތް ސްޓައިލްތައް ހާސިލް ކުރުމަށްޓަކައި ޓެކްސްޓް ނުވަތަ ބެކްގްރައުންޑް ޔުޓިލިޓީސް ބޭނުން ކުރެވިދާނެއެވެ.

# ސުރުޚީ ސުރުޚީ
1 ސެލް ސެލް
2 ސެލް ސެލް
3 ސެލް ސެލް
4 ސެލް ސެލް
5 ސެލް ސެލް
6 ސެލް ސެލް
7 ސެލް ސެލް
8 ސެލް ސެލް
9 ސެލް ސެލް 
<!-- 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>
އެހީތެރި ޓެކްނޮލޮޖީތަކަށް މާނަ ފޯރުކޮށްދިނުން

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

576px، 768px، 992px، އަދި 1120px އާއި ހަމައަށް (އެކަމަކު ނުހިމަނައި) ކޮންމެ ބްރޭކްޕޮއިންޓެއްގައި ޓޭބަލް ހޮރޮޒޮންޓަލީ ސްކްރޯލްކޮށް، އެއްވެސް .tableއެއް އެކުގައި އޮޅާލައިގެން ރެސްޕޮންސިވް ޓޭބަލްތައް އުފެއްދުން ..table-responsive{-sm|-md|-lg|-xl}max-width

ނޯޓް: ބްރައުޒާސް އިން މިވަގުތު ރޭންޖް ކޮންޓެކްސްޓް ކިއުއަރީސް އަށް ސަޕޯޓް ނުކުރާތީ، މި އަޅާކިޔުންތަކަށް މާ ޕްރެސިޝަން އާއި އެކު އަގުތައް ބޭނުންކޮށްގެން ފްރެކްޝަނަލް ވިޑްތްސް އާއި އެކު ޕްރިފިކްސް min-އަދިmax- ވިއުޕޯޓްސް (މިސާލަކަށް ހައި-ޑީޕީއައި ޑިވައިސްތަކުގައި ވަކި ޝަރުތުތަކެއްގެ ދަށުން ދިމާވެދާނެ) ގެ ލިމިޓެޝަންތަކުގެ ވަށައިގެން އަޅުގަނޑުމެން މަސައްކަތް ކުރަމެވެ .

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

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

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

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

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

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

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

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

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

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

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

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

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