मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
Check
in English

कोश्टकां

बूटस्ट्रॅपा वांगडा कोश्टकांचे ऑप्ट-इन स्टायलिंग खातीर दस्तावेजीकरण आनी उदाहरणां (जावास्क्रिप्ट प्लगइनांत तांचो प्रचलित वापर पळयल्यार).

नियाळ

<table>कॅलेंडर आनी तारीख पिकर सारकिल्या तिसऱ्या पक्षाच्या विजेटांतल्यान घटकांचो व्यापक वापर जाल्ल्यान , Bootstrap ची कोश्टकां ऑप्ट-इन आसात . .tableखंयच्याय कडेन बेस क्लास जोडात <table>, मागीर आमच्या पर्यायी संशोधक वर्ग वा सानुकूल शैलींनी विस्तार करात. सगळ्यो कोश्टक शैली बूटस्ट्रॅपांत वारसा मेळनात, म्हळ्यार खंयच्याय नेस्टेड कोश्टकांक पालकांतल्यान स्वतंत्र शैली करूं येता.

सगळ्यांत मुळावें कोश्टक मार्कअप वापरून, हांगा .tableBootstrap त -आधारीत कोश्टकां कशीं दिसतात तें पळयात.

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @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 हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-striped">
  ...
</table>

पट्टेदार स्तंभ

.table-striped-columnsखंयच्याय कोश्टक स्तंभांत झेब्रा-स्ट्राइपिंग जोडपाक वापरात .

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-striped-columns">
  ...
</table>

हे वर्ग कोश्टक वेरिएंटांतय जोडूंक शकतात:

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-dark table-striped">
  ...
</table>
# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-dark table-striped-columns">
  ...
</table>
# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-success table-striped">
  ...
</table>
# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-success table-striped-columns">
  ...
</table>

होवर करपाक येवपी वळी

.table-hoverएक भितर कोश्टक ओळींचेर होवर स्थिती सक्षम करपाक जोडात <tbody>.

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-hover">
  ...
</table>
# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-dark table-hover">
  ...
</table>

हे होव्हरेबल ओळी पट्टेदार ओळी वेरिएंट वांगडाय जोडूंक शकतात:

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-striped table-hover">
  ...
</table>

सक्रिय कोश्टकां

.table-activeवर्ग जोडून कोश्टक ओळ वा कक्ष हायलाइट करात .

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @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 हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @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);खंयच्याय निर्दिश्ट केल्ल्याचेर to layer आशिल्ल्या कोश्टक कक्षांचेर एक इनसेट बॉक्स सावळी जोडटात 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 हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-bordered">
  ...
</table>

रंग बदलपाक शिमे रंग उपयुक्तताय जोडूंक शकता:

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-bordered border-primary">
  ...
</table>

शिमो नाशिल्लीं कोश्टकां

.table-borderlessशिमो नाशिल्ल्या कोश्टकाखातीर जोडचें .

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-borderless">
  ...
</table>
# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-dark table-borderless">
  ...
</table>

ल्हान ल्हान मेज

सगळी कोशिका अर्दवट कापून आनीक संकुचीत .table-smकरपाक घालचें ..tablepadding

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-sm">
  ...
</table>
# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-dark table-sm">
  ...
</table>

कोश्टक गट विभाजक

कोश्टक गटांमदीं चड दाट शिमो जोडात— <thead>, <tbody>, आनी <tfoot>—सयत .table-group-divider. border-top-color(जाचे खातीर आमी सद्या ह्या वेळार उपयुक्तताय वर्ग दिना) बदलून रंग पसंतीचे करात .

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @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 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 हांणी केला
शीर्षक शीर्षक शीर्षक
पयलें निमाणें
बी पयलें निमाणें
पयलें निमाणें
लॅरी हांणी केला सुकणें हें @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 आनी ths लक्ष्य करपाची गरज आशिल्ल्यान , आमचो निवडक ताचेबगर बरोच लांब दिसतलो. अशे तरेन, आमी , पूण खंयच्याच संभाव्य नेस्टेड कोश्टकांतलें खंयचेंच न्हय, च्या सगळ्या s आनी s लक्ष्य करपाक मात्सो विचित्र दिसपी निवडक वापरतात .theadtbodytfoot.table > :not(caption) > * > *tdth.table

लक्षांत दवरात की तुमी <tr>s कोश्टकाचे थेट भुरगीं म्हणून जोडल्यार, ते डिफॉल्ट रितीन <tr>a मदीं गुठलायतले , अशे तरेन आमचे निवडक हेतू प्रमाणें काम करतले.<tbody>

शरीररचनाशास्त्र

मेजाचें मुखेली

कोश्टकां आनी काळो कोश्टकां सारकेंच, संशोधक वर्ग वापरात .table-lightवा s हळदुवो वा काळो करडो दिसपाक .table-dark.<thead>

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी हांणी केला सुकणें हें @twitter हांणी केला
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी हांणी केला सुकणें हें @twitter हांणी केला
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

मेजाचे पांय

# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी हांणी केला सुकणें हें @twitter हांणी केला
तळटीत तळटीत तळटीत तळटीत
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

कॅप्शनां

<caption>कोश्टकाखातीर शीर्षकाभशेन कार्य करता. स्क्रीन रीडर आशिल्ल्या वापरप्यांक कोश्टक सोदून काडपाक आनी तें कितें तें समजून घेवपाक आनी तें वाचपाचें आसा काय ना तें थारावपाक मदत करता.

वापरप्यांची वळेरी
# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी द बर्ड हांणी केला @twitter हांणी केला
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

तशेंच <caption>मेजाच्या वयल्या भागांत .caption-top.

वापरप्यांची वळेरी
# 1 . पयलें निमाणें हँडल
मार्क हें नांव ओटो हांणी केला @mdo हांणी केला
जाकोब थॉर्नटन हांणी केला @चरबी
लॅरी हांणी केला सुकणें हें @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एक with रेप करून खंयच्याय कोश्टकाक सगळ्या व्यूपोर्टां वयल्यान प्रतिसाद दिवपी करात .table-responsive. वा, वापरून चडांत चड ब्रेकपॉइंट निवडात जाचे कडेन प्रतिसाद दिवपी कोश्टक आसपाक जाय .table-responsive{-sm|-md|-lg|-xl|-xxl}.

उबें क्लिपिंग/ट्रंकेशन

प्रतिसाद दिवपी कोश्टक वापरतात overflow-y: hidden, जे कोश्टकाच्या सकयल्या वा वयल्या कांठां भायर वचपी खंयचीय सामुग्री क्लिप करता. खासा करून, हाका लागून ड्रॉपडावन मेनू आनी हेर तिसऱ्या पक्षाचे विजेट क्लिप ऑफ करूंक शकता.

सदांच प्रतिसाद दिवपी

दर एका ब्रेकपॉइंटाचेर, .table-responsiveआडव्या स्क्रोल करपा खातीर कोश्टकां वापरात.

# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ब्रेकपॉइंट विशिश्ट

.table-responsive{-sm|-md|-lg|-xl|-xxl}एका विशिश्ट ब्रेकपॉइंट मेरेन प्रतिसाद दिवपी कोश्टकां तयार करपाक गरज पडल्यार वापरात . त्या ब्रेकपॉइंटांतल्यान आनी वयर, कोश्टक सामान्यपणान वागतलें आनी आडवें स्क्रोल करचें ना.

विशिश्ट दृश्यपोर्ट रुंदायेचेर तांची प्रतिसाद शैली लागू जाय मेरेन हीं कोश्टकां मोडिल्लीं दिसूं येतात.

# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
# 1 . शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
पेशी पेशी पेशी पेशी पेशी पेशी पेशी पेशी
<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व्हेरिएबलाक लागून हळदुवे जातात.