Simple Table

Name Date Sales Status
Shaun Park 25 Apr 320 Approved
Alma Clarke 26 Apr 110 Pending
Vincent Carpenter 05 May 210 Rejected
Xavier 18 May 784 In Progress 
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th class="text-center" scope="col">Sales</th>
<th class="text-center" scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shaun Park</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">25 Apr</span>
</td>
<td class="text-center">320</td>
<td class="text-center">
    <span class="badge badge-light-success">Approved</span>
</td>
</tr>
<tr>
<td>Alma Clarke</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">26 Apr</span>
</td>
<td class="text-center">110</td>
<td class="text-center">
    <span class="badge badge-light-secondary">Pending</span>
</td>
</tr>
<tr>
<td>Vincent Carpenter</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">05 May</span>
</td>
<td class="text-center">210</td>
<td class="text-center">
    <span class="badge badge-light-danger">Rejected</span>
</td>
</tr>
<tr>
<td>Xavier</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">18 May</span>
</td>
<td class="text-center">784</td>
<td class="text-center">
    <span class="badge badge-light-info">In Progress</span>
</td>
</tr>
</tbody>
</table>
</div>

Checkbox

 Name Date Sales Status
Shaun Park 25 Apr 320 Approved
Alma Clarke 26 Apr 110 Pending
Vincent Carpenter 05 May 210 Rejected
Xavier 18 May 784 In Progress 
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="checkbox-area" scope="col">
    <div class="form-check form-check-primary">
        <input class="form-check-input" id="checkbox_parent_all" type="checkbox">
    </div>
</th>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th class="text-center" scope="col">Sales</th>
<th class="text-center" scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input checkbox_child" type="checkbox">
    </div>
</td>
<td>Shaun Park</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">25 Apr</span>
</td>
<td class="text-center">320</td>
<td class="text-center">
    <span class="badge badge-light-success">Approved</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input checkbox_child" type="checkbox">
    </div>
</td>
<td>Alma Clarke</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">26 Apr</span>
</td>
<td class="text-center">110</td>
<td class="text-center">
    <span class="badge badge-light-secondary">Pending</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input checkbox_child" type="checkbox">
    </div>
</td>
<td>Vincent Carpenter</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">05 May</span>
</td>
<td class="text-center">210</td>
<td class="text-center">
    <span class="badge badge-light-danger">Rejected</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input checkbox_child" type="checkbox">
    </div>
</td>
<td>Xavier</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">18 May</span>
</td>
<td class="text-center">784</td>
<td class="text-center">
    <span class="badge badge-light-info">In Progress</span>
</td>
</tr>
</tbody>
</table>
</div>

Hover

 Name Date Sales Status
Shaun Park 25 Apr 320 Approved
Alma Clarke 26 Apr 110 Pending
Vincent Carpenter 05 May 210 Rejected
Xavier 18 May 784 In Progress 
<div class="table-responsive">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="checkbox-area" scope="col">
    <div class="form-check form-check-primary">
        <input class="form-check-input" id="hover_parent_all" type="checkbox">
    </div>
</th>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th class="text-center" scope="col">Sales</th>
<th class="text-center" scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input hover_child" type="checkbox">
    </div>
</td>
<td>Shaun Park</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">25 Apr</span>
</td>
<td class="text-center">320</td>
<td class="text-center">
    <span class="badge badge-light-success">Approved</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input hover_child" type="checkbox">
    </div>
</td>
<td>Alma Clarke</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">26 Apr</span>
</td>
<td class="text-center">110</td>
<td class="text-center">
    <span class="badge badge-light-secondary">Pending</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input hover_child" type="checkbox">
    </div>
</td>
<td>Vincent Carpenter</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">05 May</span>
</td>
<td class="text-center">210</td>
<td class="text-center">
    <span class="badge badge-light-danger">Rejected</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input hover_child" type="checkbox">
    </div>
</td>
<td>Xavier</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">18 May</span>
</td>
<td class="text-center">784</td>
<td class="text-center">
    <span class="badge badge-light-info">In Progress</span>
</td>
</tr>
</tbody>
</table>
</div>

Striped

 Name Date Sales Status
Shaun Park 25 Apr 320 Approved
Alma Clarke 26 Apr 110 Pending
Vincent Carpenter 05 May 210 Rejected
Xavier 18 May 784 In Progress 
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="checkbox-area" scope="col">
    <div class="form-check form-check-primary">
        <input class="form-check-input" id="striped_parent_all" type="checkbox">
    </div>
</th>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th class="text-center" scope="col">Sales</th>
<th class="text-center" scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input striped_child" type="checkbox">
    </div>
</td>
<td>Shaun Park</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">25 Apr</span>
</td>
<td class="text-center">320</td>
<td class="text-center">
    <span class="badge badge-light-success">Approved</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input striped_child" type="checkbox">
    </div>
</td>
<td>Alma Clarke</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">26 Apr</span>
</td>
<td class="text-center">110</td>
<td class="text-center">
    <span class="badge badge-light-secondary">Pending</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input striped_child" type="checkbox">
    </div>
</td>
<td>Vincent Carpenter</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">05 May</span>
</td>
<td class="text-center">210</td>
<td class="text-center">
    <span class="badge badge-light-danger">Rejected</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input striped_child" type="checkbox">
    </div>
</td>
<td>Xavier</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">18 May</span>
</td>
<td class="text-center">784</td>
<td class="text-center">
    <span class="badge badge-light-info">In Progress</span>
</td>
</tr>
</tbody>
</table>
</div>

Mixed

Mixed Table is made of Hover, Striped and Border combined

 Name Date Sales Status
Shaun Park 25 Apr 320 Approved
Alma Clarke 26 Apr 110 Pending
Vincent Carpenter 05 May 210 Rejected
Xavier 18 May 784 In Progress 
<div class="table-responsive">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th class="checkbox-area" scope="col">
    <div class="form-check form-check-primary">
        <input class="form-check-input" id="mixed_parent_all" type="checkbox">
    </div>
</th>
<th class="" scope="col">Name</th>
<th scope="col">Date</th>
<th class="text-center" scope="col">Sales</th>
<th class="text-center" scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input mixed_child" type="checkbox">
    </div>
</td>
<td class="">Shaun Park</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">25 Apr</span>
</td>
<td class="text-center">320</td>
<td class="text-center">
    <span class="badge badge-light-success">Approved</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input mixed_child" type="checkbox">
    </div>
</td>
<td class="">Alma Clarke</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">26 Apr</span>
</td>
<td class="text-center">110</td>
<td class="text-center">
    <span class="badge badge-light-secondary">Pending</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input mixed_child" type="checkbox">
    </div>
</td>
<td class="">Vincent Carpenter</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">05 May</span>
</td>
<td class="text-center">210</td>
<td class="text-center">
    <span class="badge badge-light-danger">Rejected</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input mixed_child" type="checkbox">
    </div>
</td>
<td class="">Xavier</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">18 May</span>
</td>
<td class="text-center">784</td>
<td class="text-center">
    <span class="badge badge-light-info">In Progress</span>
</td>
</tr>
</tbody>
</table>
</div>

Without Border

Remove .table-bordered class to remove border from the table itself.

 Name Date Sales Status
Shaun Park 25 Apr 320 Approved
Alma Clarke 26 Apr 110 Pending
Vincent Carpenter 05 May 210 Rejected
Xavier 18 May 784 In Progress 
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="checkbox-area" scope="col">
    <div class="form-check form-check-primary">
        <input class="form-check-input" id="noBorder_parent_all" type="checkbox">
    </div>
</th>
<th class="" scope="col">Name</th>
<th scope="col">Date</th>
<th class="text-center" scope="col">Sales</th>
<th class="text-center" scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input noBorder_child" type="checkbox">
    </div>
</td>
<td class="">Shaun Park</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">25 Apr</span>
</td>
<td class="text-center">320</td>
<td class="text-center">
    <span class="badge badge-light-success">Approved</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input noBorder_child" type="checkbox">
    </div>
</td>
<td class="">Alma Clarke</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">26 Apr</span>
</td>
<td class="text-center">110</td>
<td class="text-center">
    <span class="badge badge-light-secondary">Pending</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input noBorder_child" type="checkbox">
    </div>
</td>
<td class="">Vincent Carpenter</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">05 May</span>
</td>
<td class="text-center">210</td>
<td class="text-center">
    <span class="badge badge-light-danger">Rejected</span>
</td>
</tr>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input noBorder_child" type="checkbox">
    </div>
</td>
<td class="">Xavier</td>
<td>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
    <span class="table-inner-text">18 May</span>
</td>
<td class="text-center">784</td>
<td class="text-center">
    <span class="badge badge-light-info">In Progress</span>
</td>
</tr>
</tbody>
</table>
</div>

Custom

Simple

Name Role Status
avatar
Shaun Park
shaun.park@mail.com

CEO

Management 		Online
avatar
Alma Clarke
almaClarke@mail.com

Lead Developer

Programmer 		Waiting
avatar
Vincent Carpenter
vincent@mail.com

HR

Management 		Offline
avatar
Xavier
xavier@mail.com

Lead Designer

Graphic 		On Hold 
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th class="text-center" scope="col">Status</th>
<th class="text-center" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
    <div class="media">
        <div class="avatar me-2">
            <img alt="avatar" src="../src/assets/img/profile-7.jpeg" class="rounded-circle" />
        </div>
        <div class="media-body align-self-center">
            <h6 class="mb-0">Shaun Park</h6>
            <span>shaun.park@mail.com</span>
        </div>
    </div>
</td>
<td>
    <p class="mb-0">CEO</p>
    <span class="text-success">Management</span>
</td>
<td class="text-center">
    <span class="badge badge-light-success">Online</span>
</td>
<td class="text-center">
    <div class="action-btns">
        <a href="javascript:void(0);" class="action-btn btn-view bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="View">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-edit bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="Edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-delete bs-tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
        </a>
    </div>
</td>
</tr>

<tr>
<td>
    <div class="media">
        <div class="avatar me-2">
            <img alt="avatar" src="../src/assets/img/profile-11.jpeg" class="rounded-circle" />
        </div>
        <div class="media-body align-self-center">
            <h6 class="mb-0">Alma Clarke</h6>
            <span>almaClarke@mail.com</span>
        </div>
    </div>
</td>
<td>
    <p class="mb-0">Lead Developer</p>
    <span class="text-secondary">Programmer</span>
</td>
<td class="text-center">
    <span class="badge badge-light-secondary">Waiting</span>
</td>
<td class="text-center">
    <div class="action-btns">
        <a href="javascript:void(0);" class="action-btn btn-view bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="View">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-edit bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="Edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-delete bs-tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
        </a>
    </div>
</td>
</tr>

<tr>
<td>
    <div class="media">
        <div class="avatar me-2">
            <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle" />
        </div>
        <div class="media-body align-self-center">
            <h6 class="mb-0">Vincent Carpenter</h6>
            <span>vincent@mail.com</span>
        </div>
    </div>
</td>
<td>
    <p class="mb-0">HR</p>
    <span class="text-danger">Management</span>
</td>
<td class="text-center">
    <span class="badge badge-light-danger">Offline</span>
</td>
<td class="text-center">
    <div class="action-btns">
        <a href="javascript:void(0);" class="action-btn btn-view bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="View">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-edit bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="Edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-delete bs-tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
        </a>
    </div>
</td>
</tr>

<tr>
<td>
    <div class="media">
        <div class="avatar me-2">
            <img alt="avatar" src="../src/assets/img/profile-34.jpeg" class="rounded-circle" />
        </div>
        <div class="media-body align-self-center">
            <h6 class="mb-0">Xavier</h6>
            <span>xavier@mail.com</span>
        </div>
    </div>
</td>
<td>
    <p class="mb-0">Lead Designer</p>
    <span class="text-info">Graphic</span>
</td>

<td class="text-center">
    <span class="badge badge-light-info">On Hold</span>
</td>
<td class="text-center">
    <div class="action-btns">
        <a href="javascript:void(0);" class="action-btn btn-view bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="View">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-edit bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="Edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-delete bs-tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
        </a>
    </div>
</td>
</tr>


</tbody>
</table>
</div>

Mixed

Mixed Table is made of Hover, Striped and Border combined

 Name Role Status
avatar
Shaun Park
shaun.park@mail.com

CEO

Management 		Online
avatar
Alma Clarke
almaClarke@mail.com

Lead Developer

Programmer 		Waiting
avatar
Vincent Carpenter
vincent@mail.com

HR

Management 		Offline
avatar
Xavier
xavier@mail.com

Lead Designer

Graphic 		On Hold 
<div class="table-responsive">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th class="checkbox-area" scope="col">
    <div class="form-check form-check-primary">
        <input class="form-check-input" id="custom_mixed_parent_all" type="checkbox">
    </div>
</th>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th class="text-center" scope="col">Status</th>
<th class="text-center" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input custom_mixed_child" type="checkbox">
    </div>
</td>
<td>
    <div class="media">
        <div class="avatar me-2">
            <img alt="avatar" src="../src/assets/img/profile-7.jpeg" class="rounded-circle" />
        </div>
        <div class="media-body align-self-center">
            <h6 class="mb-0">Shaun Park</h6>
            <span>shaun.park@mail.com</span>
        </div>
    </div>
</td>
<td>
    <p class="mb-0">CEO</p>
    <span class="text-success">Management</span>
</td>
<td class="text-center">
    <span class="badge badge-light-success">Online</span>
</td>
<td class="text-center">
    <div class="action-btns">
        <a href="javascript:void(0);" class="action-btn btn-view bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="View">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-edit bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="Edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-delete bs-tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
        </a>
    </div>
</td>
</tr>

<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input custom_mixed_child" type="checkbox">
    </div>
</td>
<td>
    <div class="media">
        <div class="avatar me-2">
            <img alt="avatar" src="../src/assets/img/profile-11.jpeg" class="rounded-circle" />
        </div>
        <div class="media-body align-self-center">
            <h6 class="mb-0">Alma Clarke</h6>
            <span>almaClarke@mail.com</span>
        </div>
    </div>
</td>
<td>
    <p class="mb-0">Lead Developer</p>
    <span class="text-secondary">Programmer</span>
</td>
<td class="text-center">
    <span class="badge badge-light-secondary">Waiting</span>
</td>
<td class="text-center">
    <div class="action-btns">
        <a href="javascript:void(0);" class="action-btn btn-view bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="View">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-edit bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="Edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-delete bs-tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
        </a>
    </div>
</td>
</tr>

<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input custom_mixed_child" type="checkbox">
    </div>
</td>
<td>
    <div class="media">
        <div class="avatar me-2">
            <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle" />
        </div>
        <div class="media-body align-self-center">
            <h6 class="mb-0">Vincent Carpenter</h6>
            <span>vincent@mail.com</span>
        </div>
    </div>
</td>
<td>
    <p class="mb-0">HR</p>
    <span class="text-danger">Management</span>
</td>
<td class="text-center">
    <span class="badge badge-light-danger">Offline</span>
</td>
<td class="text-center">
    <div class="action-btns">
        <a href="javascript:void(0);" class="action-btn btn-view bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="View">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-edit bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="Edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-delete bs-tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
        </a>
    </div>
</td>
</tr>

<tr>
<td>
    <div class="form-check form-check-primary">
        <input class="form-check-input custom_mixed_child" type="checkbox">
    </div>
</td>
<td>
    <div class="media">
        <div class="avatar me-2">
            <img alt="avatar" src="../src/assets/img/profile-34.jpeg" class="rounded-circle" />
        </div>
        <div class="media-body align-self-center">
            <h6 class="mb-0">Xavier</h6>
            <span>xavier@mail.com</span>
        </div>
    </div>
</td>
<td>
    <p class="mb-0">Lead Designer</p>
    <span class="text-info">Graphic</span>
</td>

<td class="text-center">
    <span class="badge badge-light-info">On Hold</span>
</td>
<td class="text-center">
    <div class="action-btns">
        <a href="javascript:void(0);" class="action-btn btn-view bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="View">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-edit bs-tooltip me-2" data-toggle="tooltip" data-placement="top" title="Edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
        </a>
        <a href="javascript:void(0);" class="action-btn btn-delete bs-tooltip" data-toggle="tooltip" data-placement="top" title="Delete">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
        </a>
    </div>
</td>
</tr>


</tbody>
</table>
</div>

Copyright © 2022 DesignReset, All rights reserved.

Coded with