मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
in English

सारणीः

Bootstrap इत्यनेन सह सारणीनां (जावास्क्रिप्ट् प्लगिन्स् मध्ये तेषां प्रचलितं उपयोगं दृष्ट्वा) ऑप्ट-इन-स्टाइलिंग् कृते दस्तावेजीकरणं उदाहरणानि च ।

अवलोकनम्

<table>पञ्चाङ्गानि तथा तिथिनिर्धारकाणि इत्यादिषु तृतीयपक्षविजेट्-मध्ये तत्त्वानां व्यापकप्रयोगस्य कारणात् , Bootstrap इत्यस्य सारणीः opt-in भवन्ति । base class .tableइत्येतत् any - मध्ये योजयन्तु <table>, ततः अस्माकं वैकल्पिक-संशोधकवर्गैः अथवा कस्टम् शैल्याः सह विस्तारयन्तु । Bootstrap मध्ये सर्वाणि सारणीशैल्यानि अनुवंशिकरूपेण न भवन्ति, अर्थात् यत्किमपि नेस्टेड् सारणी मातापितृतः स्वतन्त्रतया शैलीं कर्तुं शक्यते ।

अत्यन्तं मूलभूतं सारणीचिह्नं उपयुज्य, अत्र .tableBootstrap मध्ये -आधारितसारणीः कथं दृश्यन्ते इति ।

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओट�� @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ 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>

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-striped">
  ...
</table>

एते वर्गाः सारणीविविधतासु अपि योजयितुं शक्यन्ते:

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-dark table-striped">
  ...
</table>
# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-success table-striped">
  ...
</table>

मण्डपानी पङ्क्तयः

.table-hoverएकस्य अन्तः सारणीपङ्क्तिषु एकं होवरस्थितिं सक्षमीकरणाय योजयन्तु <tbody>

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-hover">
  ...
</table>
# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-dark table-hover">
  ...
</table>

एतानि भ्रमनीयाः पङ्क्तयः पट्टिकायुक्तेन प्रकारेण सह अपि संयोजितुं शक्यन्ते :

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-striped table-hover">
  ...
</table>

सक्रिय सारणी

.table-activeवर्गं योजयित्वा सारणीपङ्क्तिं वा कोष्ठकं वा प्रकाशयन्तु ।

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ 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>
# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ 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-bgcustom property इत्यनेन सह table cell इत्यस्य background सेट् कृत्वा आरभामः । ततः सर्वे table variants table cells colorize कर्तुं तत् custom property सेट् कुर्वन्ति । एवं प्रकारेण, यदि अर्धपारदर्शकवर्णाः सारणीपृष्ठभूमिरूपेण उपयुज्यन्ते तर्हि वयं कष्टं न प्राप्नुमः ।
  • ततः वयं table cells इत्यत्र inset box shadow योजयामः with box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);to layer on top on any specified background-color. यतः वयं विशालं spread इत्यस्य उपयोगं कुर्मः तथा च कोऽपि blur नास्ति, तस्मात् वर्णः एकरसः भविष्यति । यतः --bs-table-accent-bgपूर्वनिर्धारितरूपेण अनसेट् भवति, अस्माकं कृते पूर्वनिर्धारितपेटी छाया नास्ति ।
  • यदा either .table-striped, .table-hoveror .table-activeclasses योजिताः भवन्ति --bs-table-accent-bgतदा पृष्ठभूमिं वर्णयितुं अर्धपारदर्शकं वर्णं प्रति सेट् भवति ।
  • प्रत्येकं table variant कृते वयं --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सारणीयाः कोष्ठकानां च सर्वेषु पार्श्वेषु सीमानां कृते योजयन्तु ।

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-bordered">
  ...
</table>

वर्णं परिवर्तयितुं सीमावर्णोपयोगितानि योजयितुं शक्यन्ते:

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-bordered border-primary">
  ...
</table>

सीमारहिताः सारणीः

.table-borderlessसीमारहितस्य सारणीयाः कृते योजयन्तु ।

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-borderless">
  ...
</table>
# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-dark table-borderless">
  ...
</table>

लघु मेज

सर्वान् कोष्ठान् आर्धेषु .table-smकृत्वा किमपि अधिकं संकुचितं कर्तुं योजयन्तु ।.tablepadding

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-sm">
  ...
</table>
# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-dark table-sm">
  ...
</table>

ऊर्ध्वाधर संरेखण

Table cells of <thead>सर्वदा अधः लम्बवत् संरेखिताः भवन्ति । Table cells in <tbody>inherit their alignment from <table>तथा पूर्वनिर्धारितरूपेण the top इत्यत्र संरेखिताः भवन्ति । यत्र आवश्यकता भवति तत्र पुनः संरेखयितुं ऊर्ध्वाधरसंरेखणवर्गाणां उपयोगं कुर्वन्तु ।

शीर्षक 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>

नीडं करणम्

सीमाशैल्याः, सक्रियशैल्याः, सारणीरूपान्तराणि च नेस्टेड् सारणीभिः अनुवंशिकरूपेण न प्राप्नुवन्ति ।

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
शीर्षकम् शीर्षकम् शीर्षकम्
एकः प्रथमः अन्तिमः
प्रथमः अन्तिमः
प्रथमः अन्तिमः
ल्यारी the Bird इति @ twitter इति
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

नीडं कथं कार्यं करोति

नेस्टेड् टेबल्स् मध्ये कस्यापि शैल्याः लीकं न भवेत् इति निवारयितुं वयं अस्माकं CSS मध्ये child combinator ( ) selector इत्यस्य उपयोगं कुर्मः >। यतः अस्माकं , , तथा , इत्यत्र सर्वाणि tds तथा s लक्ष्यं कर्तुं आवश्यकता अस्ति , अस्माकं चयनकर्ता तद्विना सुन्दरं दीर्घं दृश्यते । यथा, वयं , इत्यस्य सर्वान् s तथा s लक्ष्यं कर्तुं अपेक्षया विषमरूपेण दृश्यमानं चयनकर्ताम् उपयुञ्ज्महे , परन्तु कस्यापि सम्भाव्यनेस्टेड् सारणीषु कोऽपि न ।ththeadtbodytfoot.table > :not(caption) > * > *tdth.table

ध्यानं कुर्वन्तु यत् यदि भवान् <tr>s इत्येतत् सारणीयाः प्रत्यक्षसन्ततिरूपेण योजयति तर्हि तानि पूर्वनिर्धारितरूपेण <tr>a इत्यनेन वेष्टिताः भविष्यन्ति <tbody>, अतः अस्माकं चयनकर्तारः यथा अभिप्रेतरूपेण कार्यं कुर्वन्ति ।

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

टेबल हेड

सारणीनां कृष्णसारणीनां च सदृशं, परिवर्तकवर्गाणां उपयोगं कुर्वन्तु अथवा .table-lights इत्येतत् हल्कं वा श्यामधूसरं वा दृश्यते ।.table-dark<thead>

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
ल्यारी the Bird इति @ twitter इति
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
ल्यारी the Bird इति @ twitter इति
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

मेज पाद

# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
ल्यारी the Bird इति @ twitter इति
पादलेखः पादलेखः पादलेखः पादलेखः
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

कैप्शन

A <caption>सारणीयाः शीर्षकवत् कार्यं करोति । एतत् स्क्रीन रीडर-युक्तानां उपयोक्तृभ्यः एकं सारणीम् अन्वेष्टुं तथा च तत् किं विषये इति अवगन्तुं साहाय्यं करोति तथा च ते तत् पठितुम् इच्छन्ति वा इति निर्णयं कर्तुं साहाय्यं करोति।

उपयोक्तृणां सूची
# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थूलः
लैरी द बर्ड @ twitter इति
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

भवन्तः <caption>सारणीयाः उपरि अपि स्थापयितुं शक्नुवन्ति .caption-top.

उपयोक्तृणां सूची
# . प्रथमः अन्तिमः वारङ्गः
मार्क ओटो @मडो
याकूबः थॉर्न्टन इति @स्थ���लः
ल्यारी the Bird इति @ 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>

प्रतिक्रियाशील सारणी

प्रतिक्रियाशीलसारणीः सारणीः सहजतया क्षैतिजरूपेण स्क्रॉल कर्तुं शक्नुवन्ति । .tablea with वेष्टयित्वा सर्वेषु viewports मध्ये किमपि सारणी प्रतिक्रियाशीलं कुर्वन्तु .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) उपयुज्यन्ते ।
  • light & dark table variants इत्यस्य अतिरिक्तं theme colors इति $table-bg-levelचरेन लघु भवन्ति ।