<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">
      <div class="row">
        <div class="col-12" *blockUI="'tableRowBorders'; message: 'Loading'">
            <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Table Row borders</h4>
                </div>
                <div class="card-content">
                  <div class="card-body card-dashboard">
              <p class="card-text">Example of table row borders. This is a default table border style by bootstrap and attached to <code>.table class </code>.</p>
                  </div>
                  <div class="table-responsive">
                      <table class="table 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>
      <!-- Row borders end -->
      <div class="row">
          <div class="col-12" *blockUI="'tableRowBorders'; message: 'Loading'">
              <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Table column borders</h4>
                  </div>
                  <div class="card-content">
                      <div class="card-body card-dashboard">
                <p class="card-text">Example of vertical table borders. This custom table border layout displays vertical borders only. However border between table head and table body is also visible for better visual separation. To use this layout add <code>.table-columned </code>class to the table with <code>.table class </code>.</p>
               <p>Example of table column borders. Add <code>.table-column</code> class with <code>.table </code> for table with column border.</p>
                      </div>
               <div class="table table-bordered mb-0 back_ground">
                    <div class="table-responsive">
                        <table class="table table-column">
                         <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 class="row">
        <div class="col-12" *blockUI="'borderlessTable'; message: 'Loading'">
            <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Both borders</h4>
                </div>
                <div class="card-content">
                    <div class="card-body card-dashboard">
          <p class="card-text">Example of table having both column & row borders. Add <code>.table-bordered </code> class with <code> .table </code>for both borders table.</p>
                    </div>
          <div class="table-responsive">
                      <table class="table table-bordered 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>
      <!--borderless table start-->
      <div class="row">
          <div class="col-12" *blockUI="'borderlessTable'; message: 'Loading'">
              <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Borderless Table</h4>
                  </div>
                  <div class="card-content">
                      <div class="card-body card-dashboard">
                   <p class="card-text">Example of borderless table, all border are hidden, except border <code>.thead </code>and <code>.tfoot</code>. Add .table-borderless class with .table for borderless table.</p>
                      </div>
                     <div class="table-responsive">
                        <table class="table table-borderless 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>
      <!-- Borderless table end -->

      <!-- Default borders end-->
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Default borders</h4>
            </div>
            <div class="card-content">
              <div class="card-body card-dashboard">
                <p class="card-text">Example of a default border table. This is bootstrap default table having only
                  <code>.table</code> class.</p>
              </div>
                   <div class="table-responsive">
                      <table class="table mb-0 back_ground default_borders">
                       <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>
      <!-- Default borders end -->

      <!-- Solid border end-->
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Solid border</h4>
            </div>
            <div class="card-content">
              <div class="card-body card-dashboard">
                <p class="card-text">Example of a solid bordered table row. This border inherits all styling options
                  from the default border style, the only difference is it has 2px width. Add <code>.border-solid</code>
                  to the table body row. This border style works only with row borders.</p>
              </div>
                    <div class="table-responsive ">
                      <table class="table  mb-0">
                       <thead class ="border-solid">
                       <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>


      <!-- Solid border end -->

      <!-- Double border end-->
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Double border</h4>
            </div>
            <div class="card-content">
              <div class="card-body card-dashboard">
                <p class="card-text">Example of double bordered table row. This has 4px width and double style. Add
                  <code>.border-double</code> to the table body row. This border style works only with row borders.</p>
              </div>
                    <div class="table-responsive">
                      <table class="table  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>
          <!-- Double border end -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
