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>

धारीदार स्तम्भ

.table-striped-columnsकस्मिन् अपि सारणीस्तम्भे zebra-striping योजयितुं उपयुज्यताम् ।

# .	प्रथमः	अन्तिमः	वारङ्गः
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	लैरी द बर्ड		@ twitter इति

<table class="table table-striped-columns">
  ...
</table>

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

# .	प्रथमः	अन्तिमः	वारङ्गः
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	लैरी द बर्ड		@ twitter इति

<table class="table table-dark table-striped">
  ...
</table>

# .	प्रथमः	अन्तिमः	वारङ्गः
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	लैरी द बर्ड		@ twitter इति

<table class="table table-dark table-striped-columns">
  ...
</table>

# .	प्रथमः	अन्तिमः	वारङ्गः
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	लैरी द बर्ड		@ twitter इति

<table class="table table-success table-striped">
  ...
</table>

# .	प्रथमः	अन्तिमः	वारङ्गः
१	मार्क	ओटो	@मडो
२	याकूबः	थॉर्न्टन इति	@स्थूलः
३	लैरी द बर्ड		@ twitter इति

<table class="table table-success table-striped-columns">
  ...
</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 इत्यत्र to layer इत्यनेन सह inset box shadow योजयामः box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);कस्यापि निर्दिष्टस्य उपरि background-color| यतः वयं विशालं स्प्रेडं उपयुञ्ज्महे तथा च कोऽपि blur नास्ति, तस्मात् वर्णः एकरसः भविष्यति । यतः --bs-table-accent-bgपूर्वनिर्धारितरूपेण अनसेट् भवति, अस्माकं कृते पूर्वनिर्धारितं बॉक्स छाया नास्ति ।
यदा .table-striped, .table-striped-columns, .table-hoverअथवा .table-activeवर्गाः योजिताः भवन्ति --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));
    $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सारणीयाः कोष्ठकानां च सर्वेषु पार्श्वेषु सीमानां कृते योजयन्तु ।

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

सारणी समूह विभाजक

सारणीसमूहानां मध्ये स्थूलतरं सीमां योजयन्तु— <thead>, <tbody>, तथा <tfoot>—सहितम् .table-group-divider। border-top-color(यस्य कृते वयं सम्प्रति अस्मिन् समये उपयोगितावर्गं न दद्मः) परिवर्त्य वर्णं अनुकूलितं कुर्वन्तु ।

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

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

Table cells of <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>

नीडं करणम्

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

# .

प्रथमः

अन्तिमः

वारङ्गः

१

मार्क

ओटो

@मडो

शीर्षकम्	शीर्षकम्	शीर्षकम्
एकः	प्रथमः	अन्तिमः
ख	प्रथमः	अन्तिमः
ग	प्रथमः	अन्तिमः

३

ल्यारी

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 इति

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>

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

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