<div class="app-content content">
  <div class="content-wrapper">
    <div class="content-header row mb-1">
      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
    </div>
    <div class="content-body">
      <!-- Extra large table start -->
      <div class="row">
        <div class="col-12" *blockUI="'extraLargeTable'; message: 'Loading'">
            <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Extra Large table</h4>
                </div>
                <div class="card-content">
              <div class="card-body card-dashboard">
                <p class="card-text">Example of Extra large table, Add <code>.table-xl</code> class to the
                  <code>.table</code> to create a table with extra large spacing. Extra larger table all rows have
                  <code>1.25rem</code> height.</p>
              </div>

              <div class="">
                <div class="table-responsive">
                  <table class="table table-xl mb-0">
                   <thead class="bouble-border">
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>
              </div>
             </div>
            </div>
        </div>
      </div>
      <!-- Extra large table end -->

      <!-- Large table start -->
      <div class="row">
        <div class="col-12" *blockUI="'largeTable'; message: 'Loading'">
            <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Large table</h4>
                </div>
                <div class="card-content">
              <div class="card-body card-dashboard">
                <p class="card-text">Example of large table, Add <code>.table-lg</code> class to the <code>.table</code>
                  to create a table with large spacing. Larger table all rows have <code>0.9rem</code> height.</p>
                </div>
                <div class="table-responsive">
                  <table class="table table-lg mb-0">
                   <thead class="bouble-border">
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>
                </div>
            </div>
        </div>
      </div>
      <!-- Large table end -->
      <!-- Default table start -->
      <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Default table</h4>
                </div>
                <div class="card-content">
              <div class="card-body card-dashboard">
                <p class="card-text">Example of large table, Add <code>.table-lg</code> class to the <code>.table</code>
                  to create a table with large spacing. Larger table all rows have <code>0.9rem</code> height.</p>
              </div>
                <div class="table-responsive">
                  <table class="table table-de mb-0">
                   <thead class="bouble-border">
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>
                </div>
            </div>
        </div>
      </div>
      <!-- Default table end -->
      <!-- Small table start -->
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Small table</h4>
            </div>
            <div class="card-content">
              <div class="card-body card-dashboard">
                <p class="card-text">Example of small table, Add <code>.table-sm</code> class to the <code>.table</code>
                  to create a table with small spacing. Small table all rows have <code>0.6rem</code> height.</p>
              </div>

              <div class="table table-sm mb-0 back_ground">
                <div class="table-responsive">
                  <table class="table table-sm mb-0">
                   <thead>
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Small table end -->

      <!-- Extra Small table start -->
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Extra Small table</h4>
            </div>
            <div class="card-content">
              <div class="card-body card-dashboard">
                <p class="card-text">Example of extra small table, Add <code>.table-xs</code> class to the
                  <code>.table</code> to create a table with extra small spacing. Extra small table all rows have
                  <code>0.4rem</code> height.</p>
              </div>

            
                <div class="table-responsive">
                  <table class="table table-xs">
                   <thead >
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>
            

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ////////////////////////////////////////////////////////////////////////////-->
