ଟେବୁଲ୍ |
ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ଟେବୁଲଗୁଡିକର ଅପ୍ଟ-ଇନ୍ ଷ୍ଟାଇଲିଂ ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣଗୁଡିକ (ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ରେ ସେମାନଙ୍କର ବହୁଳ ବ୍ୟବହାରକୁ ଦିଆଯାଇଥାଏ) |
ଉଦାହରଣଗୁଡିକ
କ୍ୟାଲେଣ୍ଡର ଏବଂ ଡେଟ୍ ପିକର୍ ପରି ତୃତୀୟ-ପକ୍ଷ ୱିଜେଟ୍ ମଧ୍ୟରେ ଟେବୁଲଗୁଡିକର ବ୍ୟାପକ ବ୍ୟବହାର ହେତୁ, ଆମେ ଆମର ଟେବୁଲ୍କୁ ଅପ୍ଟ-ଇନ୍ କରିବାକୁ ଡିଜାଇନ୍ କରିଛୁ | .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
s ହାଲୁକା କିମ୍ବା ଗା 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-borderless
ସୀମା ବିନା ଏକ ଟେବୁଲ୍ ପାଇଁ ଯୋଡନ୍ତୁ |
# | ପ୍ରଥମେ | ଶେଷ | ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ | |
---|---|---|---|
୧ | ମାର୍କ | Otto | @ ମିଡୋ |
୨ | ଯାକୁବ | ଥର୍ନଟନ୍ | | @ ଫାଟ |
3 | ଲ୍ୟାରି ଦି ବାର୍ଡ | | @ ଟ୍ୱିଟର |
<table class="table table-borderless">
<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-borderless
ଅନ୍ଧାର ଟେବୁଲରେ ମଧ୍ୟ ବ୍ୟବହାର କରାଯାଇପାରିବ |
# | ପ୍ରଥମେ | ଶେଷ | ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ | |
---|---|---|---|
୧ | ମାର୍କ | Otto | @ ମିଡୋ |
୨ | ଯାକୁବ | ଥର୍ନଟନ୍ | | @ ଫାଟ |
3 | ଲ୍ୟାରି ଦି ବାର୍ଡ | | @ ଟ୍ୱିଟର |
<table class="table table-borderless 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-hover
A ମଧ୍ୟରେ ଟେବୁଲ୍ ଧାଡିରେ ଏକ ହୋଭର ସ୍ଥିତି ସକ୍ଷମ କରିବାକୁ ଯୋଡନ୍ତୁ <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}
ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟ ପର୍ଯ୍ୟନ୍ତ ପ୍ରତିକ୍ରିୟାଶୀଳ ସାରଣୀ ସୃଷ୍ଟି କରିବାକୁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ବ୍ୟବହାର କରନ୍ତୁ | ସେହି ବ୍ରେକପଏଣ୍ଟ ଏବଂ ଅପ୍ ଠାରୁ, ଟେବୁଲ୍ ସାଧାରଣ ଭାବରେ ଆଚରଣ କରିବ ଏବଂ ଭୂସମାନ୍ତର ଭାବରେ ସ୍କ୍ରୋଲ୍ କରିବ ନାହିଁ |
ନିର୍ଦ୍ଦିଷ୍ଟ ଭ୍ୟୁପୋର୍ଟ ପ୍ରସ୍ଥରେ ସେମାନଙ୍କର ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ yles ଳୀ ପ୍ରୟୋଗ ନହେବା ପର୍ଯ୍ୟନ୍ତ ଏହି ସାରଣୀଗୁଡ଼ିକ ଭାଙ୍ଗି ଯାଇପାରେ |
# | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ |
---|---|---|---|---|---|---|---|---|
୧ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
୨ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
3 | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
# | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ |
---|---|---|---|---|---|---|---|---|
୧ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
୨ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
3 | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
# | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ |
---|---|---|---|---|---|---|---|---|
୧ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
୨ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
3 | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
# | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ | ଶୀର୍ଷଲେଖ |
---|---|---|---|---|---|---|---|---|
୧ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
୨ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
3 | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ | କକ୍ଷ |
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>