Source

ଟେବୁଲ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ଟେବୁଲଗୁଡିକର ଅପ୍ଟ-ଇନ୍ ଷ୍ଟାଇଲିଂ ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣଗୁଡିକ |

ଉଦାହରଣଗୁଡିକ

କ୍ୟାଲେଣ୍ଡର ଏବଂ ଡେଟ୍ ପିକର୍ ପରି ତୃତୀୟ-ପକ୍ଷ ୱିଜେଟ୍ ମଧ୍ୟରେ ଟେବୁଲଗୁଡିକର ବ୍ୟାପକ ବ୍ୟବହାର ହେତୁ, ଆମେ ଆମର ଟେବୁଲ୍କୁ ଅପ୍ଟ-ଇନ୍ କରିବାକୁ ଡିଜାଇନ୍ କରିଛୁ | .tableଯେକ any ଣସିରେ କେବଳ ବେସ୍ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ <table>, ତା’ପରେ କଷ୍ଟମ୍ ଷ୍ଟାଇଲ୍ କିମ୍ବା ଆମର ବିଭିନ୍ନ ଅନ୍ତର୍ଭୁକ୍ତ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସହିତ ବିସ୍ତାର କରନ୍ତୁ |

ଅତ୍ୟଧିକ ମ basic ଳିକ ଟେବୁଲ୍ ମାର୍କଅପ୍ ବ୍ୟବହାର କରି, .tableବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ରେ କିପରି ଆଧାରିତ ଟେବୁଲ୍ ଦେଖାଯାଏ | ସମସ୍ତ ଟେବୁଲ୍ ଶ yles ଳୀ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ 4 ରେ ଉତ୍ତରାଧିକାରୀ ଅଟେ , ଅର୍ଥାତ୍ ଯେକ any ଣସି ନେଷ୍ଟେଡ୍ ଟେବୁଲ୍ ପିତାମାତାଙ୍କ ପରି ସମାନ ଭାବରେ ଷ୍ଟାଇଲ୍ ହେବ |

# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି | ପକ୍ଷୀ @ ଟ୍ୱିଟର 
<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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ଆପଣ ମଧ୍ୟ ଅନ୍ଧାର ପୃଷ୍ଠଭୂମିରେ ହାଲୁକା ପାଠ ସହିତ ରଙ୍ଗକୁ ଓଲଟାଇ ପାରିବେ .table-dark|

# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି | ପକ୍ଷୀ @ ଟ୍ୱିଟର 
<table class="table table-dark">
  <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>

ଟେବୁଲ୍ ହେଡ୍ ଅପ୍ସନ୍ସ |

ଟେବୁଲ୍ ଏବଂ ଡାର୍କ ଟେବୁଲ୍ ପରି, ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ .thead-lightକିମ୍ବା ହାଲୁକା କିମ୍ବା ଗା dark ଧୂସର ଦେଖାଯିବା .thead-darkପାଇଁ |<thead>

# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି | ପକ୍ଷୀ @ ଟ୍ୱିଟର
# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି | ପକ୍ଷୀ @ ଟ୍ୱିଟର 
<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-stripedଭିତରେ ଥିବା ଯେକ table ଣସି ଟେବୁଲ୍ ଧାଡିରେ ଜେବ୍ରା-ଷ୍ଟ୍ରିପିଂ ଯୋଡିବାକୁ ବ୍ୟବହାର କରନ୍ତୁ <tbody>|

# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି | ପକ୍ଷୀ @ ଟ୍ୱିଟର 
<table class="table table-striped">
  <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>
# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି | ପକ୍ଷୀ @ ଟ୍ୱିଟର 
<table class="table table-striped table-dark">
  <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-borderedଟେବୁଲ୍ ଏବଂ କକ୍ଷଗୁଡ଼ିକର ସମସ୍ତ ପାର୍ଶ୍ୱରେ ସୀମା ପାଇଁ ଯୋଡନ୍ତୁ |

# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି ଦି ବାର୍ଡ | @ ଟ୍ୱିଟର 
<table class="table table-bordered">
  <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>
# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି ଦି ବାର୍ଡ | @ ଟ୍ୱିଟର 
<table class="table table-bordered table-dark">
  <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>

ସମ୍ମାନଜନକ ଧାଡିଗୁଡିକ |

.table-hoverA ମଧ୍ୟରେ ଟେବୁଲ୍ ଧାଡିରେ ଏକ ହୋଭର ସ୍ଥିତି ସକ୍ଷମ କରିବାକୁ ଯୋଡନ୍ତୁ <tbody>|

# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି ଦି ବାର୍ଡ | @ ଟ୍ୱିଟର 
<table class="table table-hover">
  <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>
# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି ଦି ବାର୍ଡ | @ ଟ୍ୱିଟର 
<table class="table table-hover table-dark">
  <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>

ଛୋଟ ଟେବୁଲ୍ |

.table-smସେଲ୍ ପ୍ୟାଡିଂକୁ ଅଧା କରି ଟେବୁଲ୍ଗୁଡ଼ିକୁ ଅଧିକ କମ୍ପାକ୍ଟ କରିବାକୁ ଯୋଡନ୍ତୁ |

# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି ଦି ବାର୍ଡ | @ ଟ୍ୱିଟର 
<table class="table table-sm">
  <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>
# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି ଦି ବାର୍ଡ | @ ଟ୍ୱିଟର 
<table class="table table-sm table-dark">
  <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>

ବିଷୟବସ୍ତୁ ଶ୍ରେଣୀଗୁଡିକ |

ଟେବୁଲ୍ ଧାଡି କିମ୍ବା ବ୍ୟକ୍ତିଗତ କକ୍ଷକୁ ରଙ୍ଗ ଦେବା ପାଇଁ ପ୍ରସଙ୍ଗ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ |

କ୍ଲାସ୍ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ
ସକ୍ରିୟ | କକ୍ଷ କକ୍ଷ
ଡିଫଲ୍ଟ | କକ୍ଷ କକ୍ଷ
ପ୍ରାଥମିକ କକ୍ଷ କକ୍ଷ
ଦ୍ Secondary ିତୀୟ କକ୍ଷ କକ୍ଷ
ସଫଳତା | କକ୍ଷ କକ୍ଷ
ବିପଦ କକ୍ଷ କକ୍ଷ
ଚେତାବନୀ କକ୍ଷ କକ୍ଷ
ସୂଚନା କକ୍ଷ କକ୍ଷ
ଆଲୋକ କକ୍ଷ କକ୍ଷ
ଅନ୍ଧାର କକ୍ଷ କକ୍ଷ 
<!-- On rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

  <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>

ଗା dark ଟେବୁଲ୍ ସହିତ ନିୟମିତ ଟେବୁଲ୍ ପୃଷ୍ଠଭୂମି ପ୍ରକାରଗୁଡ଼ିକ ଉପଲବ୍ଧ ନୁହେଁ, ତଥାପି, ଆପଣ ସମାନ ଶ yles ଳୀ ହାସଲ କରିବାକୁ ପାଠ୍ୟ କିମ୍ବା ପୃଷ୍ଠଭୂମି ଉପଯୋଗୀତା ବ୍ୟବହାର କରିପାରିବେ |

# ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ
୧ କକ୍ଷ କକ୍ଷ
୨ କକ୍ଷ କକ୍ଷ
3 କକ୍ଷ କକ୍ଷ
4 କକ୍ଷ କକ୍ଷ
5 କକ୍ଷ କକ୍ଷ
6 କକ୍ଷ କକ୍ଷ
7 କକ୍ଷ କକ୍ଷ
8 କକ୍ଷ କକ୍ଷ
9 କକ୍ଷ କକ୍ଷ 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |

ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .sr-onlyଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |

.tableଯେକ any ଣସି ସହିତ ଗୁଡ଼ାଇ ପ୍ରତିକ୍ରିୟାଶୀଳ ଟେବୁଲ୍ ସୃଷ୍ଟି କରନ୍ତୁ , ଯଥାକ୍ରମେ 576px, 768px, 992px, ଏବଂ 1120px ପର୍ଯ୍ୟନ୍ତ .table-responsive{-sm|-md|-lg|-xl}ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟରେ ଟେବୁଲ୍ ଭୂସମାନ୍ତର ଭାବରେ ସ୍କ୍ରୋଲ୍ କରନ୍ତୁ |max-width

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେହେତୁ ବ୍ରାଉଜର୍ ଗୁଡିକ ବର୍ତ୍ତମାନ ପରିସର ପ୍ରସଙ୍ଗ ଜିଜ୍ଞାସାକୁ ସମର୍ଥନ କରୁନାହାଁନ୍ତି , ଆମେ ଏହି ତୁଳନାଗୁଡ଼ିକ ପାଇଁ ଉଚ୍ଚ ସଠିକତା ସହିତ ମୂଲ୍ୟ ବ୍ୟବହାର କରି ଭଗ୍ନାଂଶ ପ୍ରସ୍ଥ (ଯାହା ଉଚ୍ଚ- dpi ଉପକରଣଗୁଡ଼ିକରେ ନିର୍ଦ୍ଦିଷ୍ଟ ପରିସ୍ଥିତିରେ ଘଟିପାରେ) ର ସୀମା min-ଏବଂ max-ଉପସର୍ଗ ଏବଂ ଭ୍ୟୁପୋର୍ଟଗୁଡିକର ସୀମା ଉପରେ କାର୍ଯ୍ୟ କରୁ | ।

କ୍ୟାପସନ୍ |

ଏକ <caption>ଟେବୁଲ୍ ପାଇଁ ହେଡିଙ୍ଗ୍ ପରି ଏକ କାର୍ଯ୍ୟ | ସ୍କ୍ରିନ୍ ରିଡର୍ ସହିତ ଉପଭୋକ୍ତାମାନଙ୍କୁ ଏକ ଟେବୁଲ୍ ଖୋଜିବା ଏବଂ ଏହା ବିଷୟରେ କ’ଣ ବୁ understand ିବାରେ ସାହାଯ୍ୟ କରେ ଏବଂ ସେମାନେ ଏହାକୁ ପ to ିବାକୁ ଚାହାଁନ୍ତି କି ନାହିଁ ତାହା ସ୍ଥିର କରନ୍ତି |

ବ୍ୟବହାରକାରୀଙ୍କ ତାଲିକା |
# ପ୍ରଥମେ | ଶେଷ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
୧ ମାର୍କ Otto @ ମିଡୋ
୨ ଯାକୁବ ଥର୍ନଟନ୍ | @ ଫାଟ
3 ଲ୍ୟାରି | ପକ୍ଷୀ @ ଟ୍ୱିଟର 
<table class="table">
  <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ଏକ ଗୁଡ଼ିକୁ ଗୁଡ଼ାଇ ସମସ୍ତ ଭ୍ୟୁପୋର୍ଟରେ ଯେକ any ଣସି ଟେବୁଲ୍ ପ୍ରତିକ୍ରିୟାଶୀଳ କରନ୍ତୁ .table-responsive| କିମ୍ବା, ସର୍ବାଧିକ ବ୍ରେକପଏଣ୍ଟ ବାଛନ୍ତୁ ଯାହା ସହିତ ବ୍ୟବହାର କରି ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ଟେବୁଲ୍ ରହିବ .table-responsive{-sm|-md|-lg|-xl}|

ଭର୍ଟିକାଲ୍ କ୍ଲିପିଂ / ଟ୍ରଙ୍କେସନ୍ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ସାରଣୀଗୁଡ଼ିକ ବ୍ୟବହାର କରେ overflow-y: hidden, ଯାହା ଟେବୁଲର ତଳ କିମ୍ବା ଉପର ଧାରକୁ ଯାଇଥିବା ଯେକ content ଣସି ବିଷୟବସ୍ତୁକୁ ବନ୍ଦ କରିଦିଏ | ବିଶେଷ ଭାବରେ, ଏହା ଡ୍ରପଡାଉନ୍ ମେନୁ ଏବଂ ଅନ୍ୟ ତୃତୀୟ-ପକ୍ଷ ୱିଜେଟ୍ କ୍ଲିପ୍ କରିପାରେ |

ସର୍ବଦା ପ୍ରତିକ୍ରିୟାଶୀଳ |

ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟ ଉପରେ, .table-responsiveଭୂସମାନ୍ତର ସ୍କ୍ରୋଲିଂ ଟେବୁଲଗୁଡିକ ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |

# ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ
୧ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
୨ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
3 କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ବ୍ରେକପଏଣ୍ଟ ନିର୍ଦ୍ଦିଷ୍ଟ |

.table-responsive{-sm|-md|-lg|-xl}ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟ ପର୍ଯ୍ୟନ୍ତ ପ୍ରତିକ୍ରିୟାଶୀଳ ସାରଣୀ ସୃଷ୍ଟି କରିବାକୁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ବ୍ୟବହାର କରନ୍ତୁ | ସେହି ବ୍ରେକପଏଣ୍ଟ ଏବଂ ଅପ୍ ଠାରୁ, ଟେବୁଲ୍ ସାଧାରଣ ଭାବରେ ଆଚରଣ କରିବ ଏବଂ ଭୂସମାନ୍ତର ଭାବରେ ସ୍କ୍ରୋଲ୍ କରିବ ନାହିଁ |

# ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ
୧ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
୨ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
3 କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
# ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ
୧ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
୨ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
3 କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
# ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ
୧ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
୨ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
3 କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
# ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ ଶୀର୍ଷଲେଖ
୧ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
୨ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ
3 କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ କକ୍ଷ 
<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>