मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
in English

तालिकाहरू

बुटस्ट्र्यापको साथ (जाभास्क्रिप्ट प्लगइनहरूमा तिनीहरूको प्रचलित प्रयोग दिएर) तालिकाहरूको अप्ट-इन स्टाइलको लागि कागजात र उदाहरणहरू।

अवलोकन

क्यालेन्डर र मिति पिकरहरू जस्ता तेस्रो-पक्ष विजेटहरूमा तत्वहरूको व्यापक प्रयोगको कारण <table>, बुटस्ट्र्यापको तालिकाहरू अप्ट-इन छन् । .tableकुनै पनि मा आधार वर्ग थप्नुहोस् <table>, त्यसपछि हाम्रो वैकल्पिक परिमार्जक वर्गहरू वा अनुकूलन शैलीहरूसँग विस्तार गर्नुहोस्। सबै तालिका शैलीहरू बुटस्ट्र्यापमा इनहेरिट गरिएका छैनन्, यसको मतलब कुनै पनि नेस्टेड तालिकाहरू अभिभावकबाट स्वतन्त्र रूपमा शैलीबद्ध गर्न सकिन्छ।

सबैभन्दा आधारभूत तालिका मार्कअप प्रयोग गर्दै, यहाँ .tableबुटस्ट्र्यापमा कसरी आधारित तालिकाहरू देखिन्छन्।

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @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>

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-striped">
  ...
</table>

यी कक्षाहरू पनि तालिका भेरियन्टहरूमा थप्न सकिन्छ:

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-dark table-striped">
  ...
</table>
# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-success table-striped">
  ...
</table>

घुमाउन मिल्ने पङ्क्तिहरू

.table-hoverएक भित्र तालिका पङ्क्तिहरूमा होभर स्थिति सक्षम गर्न थप्नुहोस् <tbody>

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-hover">
  ...
</table>
# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-dark table-hover">
  ...
</table>

यी होभरेबल पङ्क्तिहरू पनि धारीदार संस्करणसँग जोड्न सकिन्छ:

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-striped table-hover">
  ...
</table>

सक्रिय तालिकाहरू

.table-activeकक्षा थपेर तालिका पङ्क्ति वा कक्ष हाइलाइट गर्नुहोस् ।

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @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>
# पहिले अन्तिम ह्यान्डल
मार्क ओटो @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);त्यसपछि हामी तालिका कक्षहरूमा कुनै पनि निर्दिष्टको माथिको तहमा इनसेट बाकस छाया थप्छौं 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तालिका र कक्षहरूको सबै छेउमा किनाराहरू थप्नुहोस् ।

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-bordered">
  ...
</table>

सीमा रंग उपयोगिताहरू रंग परिवर्तन गर्न थप्न सकिन्छ:

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-bordered border-primary">
  ...
</table>

बोर्डर बिना तालिकाहरू

.table-borderlessबोर्डर बिनाको तालिकाको लागि थप्नुहोस् ।

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-borderless">
  ...
</table>
# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-dark table-borderless">
  ...
</table>

साना टेबलहरू

सबै सेललाई आधामा काटेर थप कम्प्याक्ट .table-smबनाउन थप्नुहोस् ।.tablepadding

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-sm">
  ...
</table>
# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-dark table-sm">
  ...
</table>

ठाडो पङ्क्तिबद्धता

तालिका कक्षहरू <thead>सधैं तलको ठाडो पङ्क्तिबद्ध हुन्छन्। तालिका कक्षहरूले <tbody>तिनीहरूको पङ्क्तिबद्धता इनहेरिट गर्छन् <table>र पूर्वनिर्धारित रूपमा शीर्षमा पङ्क्तिबद्ध हुन्छन्। जहाँ आवश्यक छ पुन: पङ्क्तिबद्ध गर्न ठाडो पङ्क्तिबद्ध वर्गहरू प्रयोग गर्नुहोस् ।

शीर्षक १ शीर्षक २ हेडिङ ३ हेडिङ ४
यो कक्ष 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>

नेस्टिङ

सीमा शैलीहरू, सक्रिय शैलीहरू, र तालिका भेरियन्टहरू नेस्टेड तालिकाहरूद्वारा इनहेरिट गरिएका छैनन्।

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @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>रूपमा र्‍याप हुनेछन् <tbody>, यसरी हाम्रा चयनकर्ताहरूले उद्देश्य अनुसार काम गर्नेछन्।

शरीर रचना

टेबल टाउको

तालिका र गाढा तालिकाहरू जस्तै, परिमार्जक वर्गहरू प्रयोग गर्नुहोस् .table-lightवा s .table-darkलाई <thead>हल्का वा गाढा खैरो देखाउनको लागि।

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी चरा @twitter
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी चरा @twitter
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

टेबल खुट्टा

# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी चरा @twitter
फुटर फुटर फुटर फुटर
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

क्याप्शनहरू

एउटा <caption>कार्य तालिकाको लागि हेडिङ जस्तै। यसले स्क्रिन रिडर भएका प्रयोगकर्ताहरूलाई एउटा तालिका फेला पार्न र यो के हो भनेर बुझ्न र उनीहरूले यसलाई पढ्न चाहनुहुन्छ कि भनेर निर्णय गर्न मद्दत गर्छ।

प्रयोगकर्ताहरूको सूची
# पहिले अन्तिम ह्यान्डल
मार्क ओटो @mdo
याकूब थोरन्टन @मोटो
ल्यारी द बर्ड @twitter
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<caption>तपाईले तालिकाको शीर्षमा पनि राख्न सक्नुहुन्छ .caption-top

प्रयोगकर्ताहरूको सूची
# पहिले अन्तिम ह्यान्डल
मार्क ओटो @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बनाउनुहोस् .table-responsive। वा, अधिकतम ब्रेकपोइन्ट छान्नुहोस् जसको प्रयोग गरेर उत्तरदायी तालिका हुन सक्छ .table-responsive{-sm|-md|-lg|-xl|-xxl}

ठाडो क्लिपिङ/ट्रङ्केसन

प्रतिक्रियाशील तालिकाहरूले तालिकाको overflow-y: hiddenतल्लो वा माथिल्लो किनारहरूभन्दा बाहिर जाने कुनै पनि सामग्रीलाई क्लिप गर्ने प्रयोग गर्दछ। विशेष गरी, यसले ड्रपडाउन मेनु र अन्य तेस्रो-पक्ष विजेटहरू क्लिप गर्न सक्छ।

सधैं उत्तरदायी

प्रत्येक ब्रेकपोइन्टमा, .table-responsiveतेर्सो रूपमा स्क्रोलिङ तालिकाहरूको लागि प्रयोग गर्नुहोस्।

# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
सेल सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल सेल
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ब्रेकपोइन्ट विशिष्ट

.table-responsive{-sm|-md|-lg|-xl|-xxl}एक विशेष ब्रेकपोइन्ट सम्म उत्तरदायी तालिकाहरू सिर्जना गर्न आवश्यक रूपमा प्रयोग गर्नुहोस् । त्यो ब्रेकपोइन्ट र माथिबाट, तालिकाले सामान्य रूपमा व्यवहार गर्नेछ र तेर्सो रूपमा स्क्रोल गर्दैन।

यी तालिकाहरू भ्युपोर्ट चौडाइहरूमा तिनीहरूको प्रतिक्रियाशील शैलीहरू लागू नभएसम्म बिग्रेको देखिन सक्छ।

# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
# हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ हेडिङ
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
सेल सेल सेल सेल सेल सेल सेल सेल
<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