Metronic extends
										
Bootstrap Tables to provide wider variants for multi-purpose usage as static tables or tables integrated with
										
Datatables as well.
 
									
									
									
										
										
										 
										
										
										
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive">
 <table class="table">
  <thead>
   <tr class="fw-bolder fs-6 text-gray-800">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										To control cell paddings easily,
										
Bootstrap Gutters classes
										
.g-* ,
										
.gy-*  and
										
.gx-*  can be used. Use
										
.gs-*to set padding left to the first cell and padding right to the last cell in the row.
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive">
 <table class="table gs-7 gy-7 gx-7">
  <thead>
   <tr class="fw-bold fs-6 text-gray-800 border-bottom border-gray-200">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.table-row-bordered  or
										.table-row-dashed  class to set border bottom style row cells. To change the row border color
										.table-row-gray-{100-900}  classes can be used.
										
										
										
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="py-5">
 <div class="table-responsive">
  <table class="table table-row-dashed table-row-gray-300 gy-7">
   <thead>
    <tr class="fw-bolder fs-6 text-gray-800">
     <th>Name</th>
     <th>Position</th>
     <th>Office</th>
     <th>Age</th>
     <th>Start date</th>
     <th>Salary</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Tiger Nixon</td>
     <td>System Architect</td>
     <td>Edinburgh</td>
     <td>61</td>
     <td>2011/04/25</td>
     <td>$320,800</td>
    </tr>
    <tr>
     <td>Garrett Winters</td>
     <td>Accountant</td>
     <td>Tokyo</td>
     <td>63</td>
     <td>2011/07/25</td>
     <td>$170,750</td>
    </tr>
   </tbody>
  </table>
 </div>
</div>
<div class="py-5">
 <div class="table-responsive">
  <table class="table table-row-dashed table-row-gray-300 gy-7">
   <thead>
    <tr class="fw-bolder fs-6 text-gray-800">
     <th>Name</th>
     <th>Position</th>
     <th>Office</th>
     <th>Age</th>
     <th>Start date</th>
     <th>Salary</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Tiger Nixon</td>
     <td>System Architect</td>
     <td>Edinburgh</td>
     <td>61</td>
     <td>2011/04/25</td>
     <td>$320,800</td>
    </tr>
    <tr>
     <td>Garrett Winters</td>
     <td>Accountant</td>
     <td>Tokyo</td>
     <td>63</td>
     <td>2011/07/25</td>
     <td>$170,750</td>
    </tr>
   </tbody>
  </table>
 </div>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.table-striped  to add zebra-striping to any table row within the
										<tbody>.
										
										
										
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive">
 <table class="table table-striped gy-7 gs-7">
  <thead>
   <tr class="fw-bold fs-6 text-gray-800 border-bottom border-gray-200">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.border  and
										.table-striped  to set bordered table with striped rows and make it rounded with
										.table-rounded.
										
										
										
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive">
 <table class="table table-rounded table-striped border gy-7 gs-7">
  <thead>
   <tr class="fw-bold fs-6 text-gray-800 border-bottom border-gray-200">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.table-flush  to reset the table and cells base styles so then style the cells individually.
										
										
										
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive">
 <table class="table table-rounded table-flush">
  <thead>
   <tr class="fw-bold fs-7 text-danger border-bottom border-gray-200 py-4">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr class="py-5 fw-bold  border-bottom border-gray-300 fs-6">
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr class="py-5 fw-bolder  border-bottom  border-gray-400 fs-4">
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add
										.table-hover  to enable a hover state on table rows within a <tbody>
										
										
										
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive">
 <table class="table table-hover table-rounded table-striped border gy-7 gs-7">
  <thead>
   <tr class="fw-bold fs-6 text-gray-800 border-bottom-2 border-gray-200">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Highlight a table row or cell by adding
										.table-active  class:
										
										
										
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive">
 <table class="table table-rounded table-row-bordered border gy-7 gs-7">
  <thead>
   <tr class="fw-bold fs-6 text-gray-800 border-bottom-2 border-gray-200">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr class="table-active">
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Border styles, active styles, and table variants are not inherited by nested tables.
										
										
										
											
												
													
														
															# 
															First 
															Last 
															Handle 
														 
													 
													
														
															1 
															Mark 
															Otto 
															@mdo 
														 
														
															
																
																	
																		
																			Header 
																			Header 
																			Header 
																		 
																	 
																	
																		
																			A 
																			First 
																			Last 
																		 
																		
																			B 
																			First 
																			Last 
																		 
																		
																			C 
																			First 
																			Last 
																		 
																	 
																
															 
														 
														
															3 
															Larry 
															the Bird 
															@twitter 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive">
    <table class="table table-striped table-rounded border border-gray-300 table-row-bordered table-row-gray-300 gy-7 gs-7">
        <thead>
            <tr class="fw-bold fs-4 text-gray-800">
                <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>
                <td colspan="4">
                    <table class="table table-row-dashed table-row-gray-500 gy-5 gs-5 mb-0">
                        <thead>
                            <tr class="fw-bold fs-6 text-gray-800">
                                <th scope="col">Header</th>
                                <th scope="col">Header</th>
                                <th scope="col">Header</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">A</th>
                                <td>First</td>
                                <td>Last</td>
                            </tr>
                            <tr>
                                <th scope="row">B</th>
                                <td>First</td>
                                <td>Last</td>
                            </tr>
                            <tr>
                                <th scope="row">C</th>
                                <td>First</td>
                                <td>Last</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Enable a table with fixed cell widths and responsive modes by referring to the official
										
Bootstrap Tables documentation.
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive">
    <table class="table table-striped gy-7 gs-7">
        <thead>
            <tr class="fw-bold fs-6 text-gray-800 border-bottom-2 border-gray-200">
                <th class="min-w-200px">Name</th>
                <th class="min-w-400px">Position</th>
                <th class="min-w-100px">Office</th>
                <th class="min-w-200px">Age</th>
                <th class="min-w-200px">Start date</th>
                <th class="min-w-200px">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
    </table>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add
										.table-sort-ascor
										.table-sort-descto
										<th>to set a column's sort state.
										
										
										
											
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive">
 <table class="table table-row-bordered gy-5">
  <thead>
   <tr class="fw-bolder fs-6 text-gray-800">
    <th class="table-sort-desc">Name</th>
    <th class="table-sort-asc">Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Wrap a table with
										.table-loadingclass and use
										.table-loading-messageclass to display a loading message.
										
										
										
											
												Loading...
												
													
														
															Name 
															Position 
															Office 
															Age 
															Start date 
															Salary 
														 
													 
													
														
															Tiger Nixon 
															System Architect 
															Edinburgh 
															61 
															2011/04/25 
															$320,800 
														 
														
															Garrett Winters 
															Accountant 
															Tokyo 
															63 
															2011/07/25 
															$170,750 
														 
														
															Ashton Cox 
															Junior Technical Author 
															San Francisco 
															66 
															2009/01/12 
															$86,000 
														 
														
															Cedric Kelly 
															Senior Javascript Developer 
															Edinburgh 
															22 
															2012/03/29 
															$433,060 
														 
														
															Airi Satou 
															Accountant 
															Tokyo 
															33 
															2008/11/28 
															$162,700 
														 
														
															Brielle Williamson 
															Integration Specialist 
															New York 
															61 
															2012/12/02 
															$372,000 
														 
														
															Herrod Chandler 
															Sales Assistant 
															San Francisco 
															59 
															2012/08/06 
															$137,500 
														 
													 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<div class="table-responsive table-loading">
 <div class="table-loading-message">
  Loading...
 </div>
 <table class="table table-row-bordered gy-5">
  <thead>
   <tr class="fw-bolder fs-6 text-gray-800">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>