އޯވަރވިއު
<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
ކުރުމަށް އަޅާށެވެ ..table
padding
#
ފުރަތަމަ
އެންމެ ފަހު
ހިފަހައްޓާތަން
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 >
ނެސްޓިންގ މަސައްކަތް ކުރާ ގޮތް
ނެސްޓް ޓޭބަލްތަކަށް އެއްވެސް ސްޓައިލެއް ލީކުވުން ހުއްޓުވުމަށްޓަކައި ، >
އަޅުގަނޑުމެންގެ ސީއެސްއެސްގައި ބޭނުންކުރަނީ ޗައިލްޑް ކޮމްބިނޭޓަރ ( ) ސެލެކްޓަރ އެވެ. އަޅުގަނޑުމެންނަށް , , އަދި ގައިވާ ހުރިހާ td
s އަދި s އަށް ޓާގެޓް ކުރަން ޖެހޭތީ ، އަޅުގަނޑުމެންގެ ސެލެކްޓަރ އެއާ ނުލައި ކިތަންމެހާވެސް ދިގުކޮށް ފެންނާނެ. އެގޮތުން، އަޅުގަނޑުމެން ބޭނުންކުރަނީ ތަންކޮޅެއް އޯޑް ލޫކިންގ ސެލެކްޓަރ އަށް ޓާގެޓް ކުރުމަށް , އެކަމަކު އެއްވެސް ޕޮޓެންޝަލް ނެސްޓް ޓޭބަލް އެއް ނޫނެވެ.th
thead
tbody
tfoot
.table > :not(caption) > * > *
td
th
.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 : .5 rem ;
$table-cell-padding-x : .5 rem ;
$table-cell-padding-y-sm : .25 rem ;
$table-cell-padding-x-sm : .25 rem ;
$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
ވެރިއޭބަލް އިންނެވެ.