મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
Check
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>

પટ્ટાવાળી કૉલમ

.table-striped-columnsકોઈપણ ટેબલ કૉલમમાં ઝેબ્રા-સ્ટ્રાઇપિંગ ઉમેરવા માટે ઉપયોગ કરો.

# પ્રથમ છેલ્લા હેન્ડલ
1 ચિહ્ન ઓટ્ટો @mdo
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી ધ બર્ડ @Twitter
<table class="table table-striped-columns">
  ...
</table>

આ વર્ગો કોષ્ટક ચલોમાં પણ ઉમેરી શકાય છે:

# પ્રથમ છેલ્લા હેન્ડલ
1 ચિહ્ન ઓટ્ટો @mdo
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી ધ બર્ડ @Twitter
<table class="table table-dark table-striped">
  ...
</table>
# પ્રથમ છેલ્લા હેન્ડલ
1 ચિહ્ન ઓટ્ટો @mdo
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી ધ બર્ડ @Twitter
<table class="table table-dark table-striped-columns">
  ...
</table>
# પ્રથમ છેલ્લા હેન્ડલ
1 ચિહ્ન ઓટ્ટો @mdo
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી ધ બર્ડ @Twitter
<table class="table table-success table-striped">
  ...
</table>
# પ્રથમ છેલ્લા હેન્ડલ
1 ચિહ્ન ઓટ્ટો @mdo
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી ધ બર્ડ @Twitter
<table class="table table-success table-striped-columns">
  ...
</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-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 લેરી ધ બર્ડ @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>, અને <tfoot>—સાથે .table-group-divider. બદલીને રંગને કસ્ટમાઇઝ કરો border-top-color(જે અમે હાલમાં આ સમયે ઉપયોગિતા વર્ગ પ્રદાન કરતા નથી).

# પ્રથમ છેલ્લા હેન્ડલ
1 ચિહ્ન ઓટ્ટો @mdo
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી ધ બર્ડ @Twitter
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 લેરી પક્ષી @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 ને લક્ષ્ય બનાવવાની જરૂર હોવાથી , અમારા પસંદગીકાર તેના વિના ખૂબ લાંબુ દેખાશે. જેમ કે, અમે બધા s અને s ને લક્ષ્ય બનાવવા માટે એકદમ વિચિત્ર દેખાતા પસંદગીકારનો ઉપયોગ કરીએ છીએ , પરંતુ કોઈપણ સંભવિત નેસ્ટેડ કોષ્ટકોમાંથી કોઈ નહીં.ththeadtbodytfoot.table > :not(caption) > * > *tdth.table

નોંધ કરો કે જો તમે <tr>ટેબલના ડાયરેક્ટ ચિલ્ડ્રન તરીકે s ઉમેરો છો, તો તે ડિફૉલ્ટ રૂપે <tr>લપેટવામાં આવશે <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
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વેરીએબલ દ્વારા હળવા કરવામાં આવે છે.