ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
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>

ਇਹਨਾਂ ਕਲਾਸਾਂ ਨੂੰ ਸਾਰਣੀ ਦੇ ਰੂਪਾਂ ਵਿੱਚ ਵੀ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ:

# ਪਹਿਲਾਂ ਆਖਰੀ ਹੈਂਡਲ
1 ਮਾਰਕ ਓਟੋ @mdo
2 ਜੈਕਬ ਥੋਰਨਟਨ @ਚਰਬੀ
3 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ
<table class="table table-dark table-striped">
  ...
</table>
# ਪਹਿਲਾਂ ਆਖਰੀ ਹੈਂਡਲ
1 ਮਾਰਕ ਓਟੋ @mdo
2 ਜੈਕਬ ਥੋਰਨਟਨ @ਚਰਬੀ
3 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ
<table class="table table-success table-striped">
  ...
</table>

ਘੁੰਮਣਯੋਗ ਕਤਾਰਾਂ

.table-hoverਇੱਕ ਦੇ ਅੰਦਰ ਸਾਰਣੀ ਦੀਆਂ ਕਤਾਰਾਂ 'ਤੇ ਇੱਕ ਹੋਵਰ ਸਥਿਤੀ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ <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-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 ਲੈਰੀ ਦ ਬਰਡ @ਟਵਿੱਟਰ
<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>ਉਹਨਾਂ ਦੀ ਇਕਸਾਰਤਾ ਪ੍ਰਾਪਤ ਹੁੰਦੀ ਹੈ <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 ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ , ਸਾਡਾ ਚੋਣਕਾਰ ਇਸ ਤੋਂ ਬਿਨਾਂ ਕਾਫ਼ੀ ਲੰਬਾ ਦਿਖਾਈ ਦੇਵੇਗਾ। ਇਸ ਤਰ੍ਹਾਂ, ਅਸੀਂ ਸਾਰੇ s ਅਤੇ s ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ ਅਜੀਬ ਦਿੱਖ ਵਾਲੇ ਚੋਣਕਾਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ , ਪਰ ਕਿਸੇ ਵੀ ਸੰਭਾਵੀ ਨੇਸਟਡ ਟੇਬਲ ਵਿੱਚੋਂ ਕੋਈ ਨਹੀਂ।theadtbodytfoot.table > :not(caption) > * > *tdth.table

ਨੋਟ ਕਰੋ ਕਿ ਜੇਕਰ ਤੁਸੀਂ <tr>ਟੇਬਲ ਦੇ ਸਿੱਧੇ ਬੱਚਿਆਂ ਵਜੋਂ s ਨੂੰ ਜੋੜਦੇ ਹੋ, ਤਾਂ ਉਹ ਮੂਲ ਰੂਪ <tr>ਵਿੱਚ ਇੱਕ ਵਿੱਚ ਲਪੇਟੇ <tbody>ਜਾਣਗੇ, ਇਸ ਤਰ੍ਹਾਂ ਸਾਡੇ ਚੋਣਕਾਰ ਇਰਾਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰਨਗੇ।

ਸਰੀਰ ਵਿਗਿਆਨ

ਟੇਬਲ ਸਿਰ

ਟੇਬਲ ਅਤੇ ਡਾਰਕ ਟੇਬਲ ਦੇ ਸਮਾਨ, ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ .table-lightਜਾਂ s ਨੂੰ ਹਲਕਾ ਜਾਂ ਗੂੜ੍ਹਾ ਸਲੇਟੀ ਦਿਖਾਈ .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 ਲੈਰੀ ਪੰਛੀ @ਟਵਿੱਟਰ
<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ਵੇਰੀਏਬਲ ਦੁਆਰਾ ਥੀਮ ਦੇ ਰੰਗਾਂ ਨੂੰ ਹਲਕਾ ਕੀਤਾ ਗਿਆ ਹੈ।