ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
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>

ಗೂಡುಕಟ್ಟುವ ಕೆಲಸ ಹೇಗೆ

ನೆಸ್ಟೆಡ್ ಟೇಬಲ್‌ಗಳಿಗೆ ಯಾವುದೇ ಶೈಲಿಗಳು ಸೋರಿಕೆಯಾಗದಂತೆ ತಡೆಯಲು , ನಾವು >ನಮ್ಮ CSS ನಲ್ಲಿ ಚೈಲ್ಡ್ ಕಾಂಬಿನೇಟರ್ ( ) ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ. , , ಮತ್ತು ನಲ್ಲಿರುವ ಎಲ್ಲಾ tds ಮತ್ತು ಗಳನ್ನು ನಾವು ಗುರಿಯಾಗಿಸಿಕೊಳ್ಳಬೇಕಾಗಿರುವುದರಿಂದ , ನಮ್ಮ ಆಯ್ಕೆದಾರ ಅದು ಇಲ್ಲದೆ ಬಹಳ ಉದ್ದವಾಗಿ ಕಾಣುತ್ತದೆ. ಅದರಂತೆ, ಎಲ್ಲಾ s ಮತ್ತು ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ನಾವು ಬೆಸವಾಗಿ ಕಾಣುವ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ , ಆದರೆ ಯಾವುದೇ ಸಂಭಾವ್ಯ ನೆಸ್ಟೆಡ್ ಟೇಬಲ್‌ಗಳಿಲ್ಲ.ththeadtbodytfoot.table > :not(caption) > * > *tdth.table

ನೀವು <tr>ಟೇಬಲ್‌ನ ನೇರ ಮಕ್ಕಳಂತೆ s ಅನ್ನು ಸೇರಿಸಿದರೆ, ಅವುಗಳನ್ನು ಡೀಫಾಲ್ಟ್ <tr>ಆಗಿ ಸುತ್ತಿಡಲಾಗುತ್ತದೆ <tbody>, ಹೀಗಾಗಿ ನಮ್ಮ ಆಯ್ಕೆದಾರರು ಉದ್ದೇಶಿಸಿದಂತೆ ಕೆಲಸ ಮಾಡುತ್ತಾರೆ.

ಅಂಗರಚನಾಶಾಸ್ತ್ರ

ಟೇಬಲ್ ಹೆಡ್

ಟೇಬಲ್‌ಗಳು ಮತ್ತು ಡಾರ್ಕ್ ಟೇಬಲ್‌ಗಳಂತೆಯೇ, ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ಬಳಸಿ .table-lightಅಥವಾ .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ವೇರಿಯೇಬಲ್‌ನಿಂದ ಹಗುರಗೊಳಿಸಲಾಗುತ್ತದೆ.