പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്സ് നാവിഗേഷനിലേക്ക് പോകുക
Check
in English

പട്ടികകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് പട്ടികകൾ തിരഞ്ഞെടുക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും (ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിനുകളിൽ അവയുടെ പ്രചാരത്തിലുള്ള ഉപയോഗം കണക്കിലെടുക്കുമ്പോൾ).

അവലോകനം

<table>കലണ്ടറുകളും തീയതി പിക്കറുകളും പോലുള്ള മൂന്നാം കക്ഷി വിജറ്റുകളിലുടനീളം മൂലകങ്ങളുടെ വ്യാപകമായ ഉപയോഗം കാരണം , ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പട്ടികകൾ ഓപ്റ്റ്-ഇൻ ആണ് . അടിസ്ഥാന ക്ലാസ് .tableഏതെങ്കിലും ഒന്നിലേക്ക് ചേർക്കുക <table>, തുടർന്ന് ഞങ്ങളുടെ ഓപ്ഷണൽ മോഡിഫയർ ക്ലാസുകളോ ഇഷ്‌ടാനുസൃത ശൈലികളോ ഉപയോഗിച്ച് വിപുലീകരിക്കുക. എല്ലാ ടേബിൾ ശൈലികളും ബൂട്ട്‌സ്‌ട്രാപ്പിൽ പാരമ്പര്യമായി ലഭിക്കുന്നില്ല, അതായത് ഏതെങ്കിലും നെസ്റ്റഡ് ടേബിളുകൾ രക്ഷിതാവിൽ നിന്ന് സ്വതന്ത്രമായി രൂപപ്പെടുത്താം.

ഏറ്റവും അടിസ്ഥാന ടേബിൾ മാർക്ക്അപ്പ് ഉപയോഗിച്ച്, .tableബൂട്ട്‌സ്‌ട്രാപ്പിൽ ടേബിളുകൾ എങ്ങനെ കാണപ്പെടുന്നുവെന്നത് ഇതാ.

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<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 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-striped">
  ...
</table>

വരയുള്ള നിരകൾ

.table-striped-columnsഏതെങ്കിലും പട്ടിക നിരയിലേക്ക് സീബ്ര-സ്ട്രിപ്പിംഗ് ചേർക്കാൻ ഉപയോഗിക്കുക .

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-striped-columns">
  ...
</table>

ഈ ക്ലാസുകൾ ടേബിൾ വേരിയന്റുകളിലേക്കും ചേർക്കാവുന്നതാണ്:

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-dark table-striped">
  ...
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-dark table-striped-columns">
  ...
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-success table-striped">
  ...
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-success table-striped-columns">
  ...
</table>

ഹോവർ ചെയ്യാവുന്ന വരികൾ

.table-hovera ഉള്ളിലെ പട്ടിക വരികളിൽ ഒരു ഹോവർ അവസ്ഥ പ്രവർത്തനക്ഷമമാക്കാൻ ചേർക്കുക <tbody>.

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-hover">
  ...
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-dark table-hover">
  ...
</table>

ഈ ഹോവർ ചെയ്യാവുന്ന വരികൾ വരയുള്ള വരികളുടെ വേരിയന്റുമായി സംയോജിപ്പിക്കാം:

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-striped table-hover">
  ...
</table>

സജീവ പട്ടികകൾ

.table-activeഒരു ക്ലാസ് ചേർത്തുകൊണ്ട് ഒരു പട്ടിക വരിയോ സെല്ലോ ഹൈലൈറ്റ് ചെയ്യുക .

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<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 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<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-striped-columns, .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));
    $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);
  }
}

പട്ടിക ബോർഡറുകൾ

ബോർഡർ മേശകൾ

.table-borderedപട്ടികയുടെയും സെല്ലുകളുടെയും എല്ലാ വശങ്ങളിലും ബോർഡറുകൾക്കായി ചേർക്കുക .

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-bordered">
  ...
</table>

നിറങ്ങൾ മാറ്റാൻ ബോർഡർ കളർ യൂട്ടിലിറ്റികൾ ചേർക്കാവുന്നതാണ്:

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-bordered border-primary">
  ...
</table>

അതിരുകളില്ലാത്ത മേശകൾ

.table-borderlessബോർഡറുകളില്ലാത്ത ഒരു ടേബിളിനായി ചേർക്കുക .

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-borderless">
  ...
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-dark table-borderless">
  ...
</table>

ചെറിയ മേശകൾ

എല്ലാ സെല്ലും പകുതിയായി മുറിച്ച് .table-smകൂടുതൽ ഒതുക്കമുള്ളതാക്കാൻ ചേർക്കുക ..tablepadding

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-sm">
  ...
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-dark table-sm">
  ...
</table>

ടേബിൾ ഗ്രൂപ്പ് ഡിവൈഡറുകൾ

ടേബിൾ ഗ്രൂപ്പുകൾക്കിടയിൽ ഇരുണ്ട കട്ടിയുള്ള ഒരു ബോർഡർ ചേർക്കുക- <thead>, <tbody>, ഒപ്പം <tfoot>- കൂടെ .table-group-divider. border-top-color(ഇപ്പോൾ ഞങ്ങൾ ഒരു യൂട്ടിലിറ്റി ക്ലാസ് നൽകുന്നില്ല) മാറ്റിക്കൊണ്ട് നിറം ഇഷ്ടാനുസൃതമാക്കുക .

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
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>

ലംബ വിന്യാസം

ന്റെ ടേബിൾ സെല്ലുകൾ <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 ലാറി പക്ഷി @ട്വിറ്റർ
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

നെസ്റ്റിംഗ് എങ്ങനെ പ്രവർത്തിക്കുന്നു

നെസ്റ്റഡ് ടേബിളുകളിലേക്ക് ഏതെങ്കിലും ശൈലികൾ ചോരുന്നത് തടയാൻ , ഞങ്ങൾ >ഞങ്ങളുടെ CSS- ൽ ചൈൽഡ് കോമ്പിനേറ്റർ ( ) സെലക്ടർ ഉപയോഗിക്കുന്നു . , , എന്നിവയിലെ എല്ലാ tds ഉം ths ഉം ഞങ്ങൾ ടാർഗെറ്റുചെയ്യേണ്ടതിനാൽ , ഞങ്ങളുടെ സെലക്ടർ അതില്ലാതെ വളരെ നീണ്ടതായി കാണപ്പെടും. അതുപോലെ , ന്റെ എല്ലാ സെലക്‌ടുകളും ടാർഗെറ്റുചെയ്യാൻ ഞങ്ങൾ വിചിത്രമായി കാണപ്പെടുന്ന സെലക്ടർ ഉപയോഗിക്കുന്നു , എന്നാൽ സാധ്യതയുള്ള നെസ്റ്റഡ് ടേബിളുകളൊന്നും ഇല്ല.theadtbodytfoot.table > :not(caption) > * > *tdth.table

<tr>ഒരു ടേബിളിന്റെ ഡയറക്ട് ചിൽഡ്രൻ ആയി നിങ്ങൾ s-യെ ചേർത്താൽ, <tr>അവ ഡിഫോൾട്ടായി എയിൽ പൊതിഞ്ഞിരിക്കും <tbody>, അങ്ങനെ ഞങ്ങളുടെ സെലക്ടർമാർ ഉദ്ദേശിച്ച രീതിയിൽ പ്രവർത്തിക്കും.

അനാട്ടമി

മേശ തല

ടേബിളുകൾക്കും ഡാർക്ക് ടേബിളുകൾക്കും സമാനമായി, മോഡിഫയർ ക്ലാസുകൾ ഉപയോഗിക്കുക അല്ലെങ്കിൽ .table-lights ലൈറ്റ് അല്ലെങ്കിൽ ഇരുണ്ട ചാരനിറത്തിൽ ദൃശ്യമാക്കുക..table-dark<thead>

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

ടേബിൾ കാൽ

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ
അടിക്കുറിപ്പ് അടിക്കുറിപ്പ് അടിക്കുറിപ്പ് അടിക്കുറിപ്പ്
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

അടിക്കുറിപ്പുകൾ

<caption>ഒരു ടേബിളിനുള്ള തലക്കെട്ട് പോലെയാണ് എ പ്രവർത്തിക്കുന്നത്. സ്‌ക്രീൻ റീഡറുള്ള ഉപയോക്താക്കളെ ഒരു ടേബിൾ കണ്ടെത്താനും അത് എന്തിനെക്കുറിച്ചാണെന്ന് മനസ്സിലാക്കാനും അത് വായിക്കണോ എന്ന് തീരുമാനിക്കാനും ഇത് സഹായിക്കുന്നു.

ഉപയോക്താക്കളുടെ പട്ടിക
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

ഉപയോഗിച്ച് നിങ്ങൾക്ക് <caption>മേശയുടെ മുകളിൽ വയ്ക്കാം .caption-top.

ഉപയോക്താക്കളുടെ പട്ടിക
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ
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>

പ്രതികരിക്കുന്ന പട്ടികകൾ

റെസ്‌പോൺസീവ് ടേബിളുകൾ ടേബിളുകൾ തിരശ്ചീനമായി സ്‌ക്രോൾ ചെയ്യാൻ അനുവദിക്കുന്നു. .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:                 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%;

ലൂപ്പ്

$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-scaleലൈറ്റ് & ഡാർക്ക് ടേബിൾ വേരിയന്റുകൾക്ക് പുറമെ, തീം നിറങ്ങൾ വേരിയബിളിലൂടെ ലഘൂകരിക്കുന്നു .