<div class="table-responsive">    <table class="table table-bordered table-hover table-striped mb-4">        <thead>            <tr>                <th>Name</th>                <th>Date</th>                <th>Sale</th>                <th class="text-center">Status</th>                <th></th>            </tr>        </thead>        <tbody>            <tr>                <td>Shaun Park</td>                <td>10/08/2019</td>                <td>320</td>                <td class="text-center"><span class="text-success">Complete</span></td>                <td class="text-center"><svg> ... </svg></td>            </tr>            <tr>                <td> Alma Clarke</td>                <td>11/08/2019</td>                <td>420</td>                <td class="text-center"><span class="text-secondary">Pending</span></td>                <td class="text-center"><svg> ... </svg></td>            </tr>            <tr>                <td>Xavier</td>                <td>12/08/2019</td>                <td>130</td>                <td class="text-center"><span class="text-info">In progress</span></td>                <td class="text-center"><svg> ... </svg></td>            </tr>            <tr>                <td>Vincent Carpenter</td>                <td>13/08/2019</td>                <td>260</td>                <td class="text-center"><span class="text-danger">Canceled</span></td>                <td class="text-center"><svg> ... </svg></td>            </tr>        </tbody>    </table></div>

<div class="table-responsive">    <table class="table table-bordered table-striped mb-4">        <thead>            <tr>                <th>Name</th>                <th>Date</th>                <th>Sale</th>                <th class="text-center">Action</th>            </tr>        </thead>        <tbody>            <tr>                <td>                    <div class="d-flex">                        <div class="usr-img-frame mr-2 rounded-circle">                            <img alt="avatar" class="img-fluid rounded-circle" src="assets/img/boy.png">                        </div>                        <p class="align-self-center mb-0">Shaun</p>                    </div>                </td>                <td>10/08/2019</td>                <td>320</td>                <td class=" text-center"><svg> ... </svg></td>            </tr>            <tr>                <td>                    <div class="d-flex">                        <div class="usr-img-frame mr-2 rounded-circle">                            <img alt="avatar" class="img-fluid rounded-circle" src="assets/img/girl-1.png">                        </div>                        <p  class="align-self-center mb-0">Alma</p>                    </div>                </td>                <td>11/08/2019</td>                <td>420</td>                <td class="text-center"><svg> ... </svg></td>            </tr>            <tr>                <td>                    <div class="d-flex">                        <div class="usr-img-frame mr-2 rounded-circle">                            <img alt="avatar" class="img-fluid rounded-circle" src="assets/img/girl-2.png">                        </div>                        <p  class="align-self-center mb-0">Kelly</p>                    </div>                </td>                <td>12/08/2019</td>                <td>130</td>                <td class="text-center"><svg> ... </svg></td>            </tr>            <tr>                <td>                    <div class="d-flex">                        <div class="usr-img-frame mr-2 rounded-circle">                            <img alt="avatar" class="img-fluid rounded-circle" src="assets/img/boy-2.png">                        </div>                        <p  class="align-self-center mb-0">Vincent</p>                    </div>                </td>                <td>13/08/2019</td>                <td>260</td>                <td class="text-center"><svg> ... </svg></td>            </tr>        </tbody>    </table></div>

<div class="table-responsive">    <table class="table table-hover table-dark mb-4">        <thead>            <tr>                <th class="text-center">#</th>                <th>First Name</th>                <th>Last Name</th>                <th>Email</th>                <th></th>            </tr>        </thead>        <tbody>            <tr>                <td class="text-center">1</td>                <td>John</td>                <td>Doe</td>                <td>johndoe@yahoo.com</td>                <td class=" text-center"><svg> ... </svg></td>            </tr>            <tr>                <td class="text-center">2</td>                <td>Andy</td>                <td>King</td>                <td>andyking@gmail.com</td>                <td class="text-center"><svg> ... </svg></td>            </tr>            <tr>                <td class="text-center">3</td>                <td>Lisa</td>                <td>Doe</td>                <td>lisadoe@live.com</td>                <td class="text-center"><svg> ... </svg></td>            </tr>            <tr>                <td class="text-center">4</td>                <td>Vincent</td>                <td>Carpenter</td>                <td>vinnyc@outlook.com</td>                <td class="text-center"><svg> ... </svg></td>            </tr>        </tbody>    </table></div>

<div class="table-responsive">    <table class="table mb-4">      <caption>List of all users</caption>      <thead>            <tr>                <th class="text-center">#</th>                <th>Name</th>                <th>Email</th>                <th class="">Status</th>                <th>Register</th>            </tr>        </thead>        <tbody>            <tr>                <td class="text-center">1</td>                <td class="text-primary">Shaun Park</td>                <td>johndoe@yahoo.com</td>                <td class=""><span class=" shadow-none badge outline-badge-primary">Complete</span></td>                <td>5 min ago</td>            </tr>            <tr>                <td class="text-center">2</td>                <td class="text-primary">Andy King</td>                <td>andyking@gmail.com</td>                <td class=""><span class="badge outline-badge-secondary shadow-none">Pending</span></td>                <td>10 min ago</td>            </tr>            <tr>                <td class="text-center">3</td>                <td class="text-primary">Mary McDonald</td>                <td>lisadoe@live.com</td>                <td class=""><span class="badge outline-badge-info shadow-none">In Progress</span></td>                <td>1 hour ago</td>            </tr>            <tr>                <td class="text-center">4</td>                <td class="text-primary">Vincent Carpenter</td>                <td>vinnyc@outlook.com</td>                <td class=""><span class="badge outline-badge-danger shadow-none">Cancel</span></td>                <td>1 day ago</td>            </tr>        </tbody>    </table></div>

<div class="table-responsive">    <table class="table table-bordered">        <thead>            <tr>                <th class="text-center">#</th>                <th>Name</th>                <th>Progress</th>                <th>Sales</th>                <th class="text-center">Action</th>            </tr>        </thead>        <tbody>            <tr>                <td class="text-center">1</td>                <td>John Doe</td>                <td>                                                                        <div class="progress br-30">                        <div class="progress-bar br-30 bg-primary" role="progressbar" style="width: 29.56%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>                    </div>                </td>                <td><p class="text-danger">29.56%</p></td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>            <tr>                <td class="text-center">2</td>                <td>Andy King</td>                <td>                                                                        <div class="progress br-30">                        <div class="progress-bar br-30 bg-warning" role="progressbar" style="width: 19.15%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>                    </div>                </td>                <td><p class="text-danger">19.15%</p></td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>            <tr>                <td class="text-center">3</td>                <td>Lisa Doe</td>                <td>                                                                        <div class="progress br-30">                        <div class="progress-bar br-30 bg-success" role="progressbar" style="width: 39.00%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>                    </div>                </td>                <td><p class="text-danger">39.00%</p></td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>            <tr>                <td class="text-center">4</td>                <td>Vincent Carpenter</td>                <td>                                                                        <div class="progress br-30">                        <div class="progress-bar br-30 bg-secondary" role="progressbar" style="width: 88.03%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>                    </div>                </td>                <td><p class="text-success">88.03%</p></td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>        </tbody>    </table></div>

<div class="table-responsive">    <table class="table mb-4 contextual-table">        <thead>            <tr class="">                <th class="text-center">#</th>                <th>First Name</th>                <th>Last Name</th>                <th>Email</th>            </tr>        </thead>        <tbody>            <tr class="table-default">                <td class="text-center">1</td>                <td>John</td>                <td>Doe</td>                <td>johndoe@yahoo.com</td>            </tr>            <tr class="table-primary">                <td class="text-center">2</td>                <td>Andy</td>                <td>King</td>                <td>andyking@gmail.com</td>            </tr>            <tr class="table-secondary">                <td class="text-center">3</td>                <td>Lisa</td>                <td>Doe</td>                <td>lisadoe@live.com</td>            </tr>            <tr class="table-success">                <td class="text-center">4</td>                <td>Vincent</td>                <td>Carpenter</td>                <td>vinnyc@outlook.com</td>            </tr>            <tr class="table-warning">                <td class="text-center">5</td>                <td>Shaun</td>                <td>Park</td>                <td>spark@adobe.com</td>            </tr>            <tr class="table-danger">                <td class="text-center">6</td>                <td>Nia</td>                <td>Hillyer</td>                <td>niahill@gmail.com</td>            </tr>            <tr class="table-info">                <td class="text-center">7</td>                <td>Marry</td>                <td>McDonald</td>                <td>marryMcD@gmail.com</td>            </tr>            <tr class="table-dark">                <td class="text-center">8</td>                <td>Amy</td>                <td>Diaz</td>                <td>amydiaz@gmail.com</td>            </tr>        </tbody>    </table></div>

<div class="table-responsive">    <table class="table table-bordered mb-4">        <thead>            <tr>                <th>Name</th>                <th>Date</th>                <th>Sale</th>                <th class="text-center">Status</th>                <th class="text-center">Action</th>            </tr>        </thead>        <tbody>            <tr>                <td>Shaun</td>                <td>10/08/2019</td>                <td>320</td>                <td class="text-center"><span class="badge badge-success">Approved</span></td>                <td class="text-center">                                        <div class="dropdown custom-dropdown">                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                            <svg> ... </svg>                        </a>                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">                            <a class="dropdown-item" href="javascript:void(0);">Download</a>                            <a class="dropdown-item" href="javascript:void(0);">Share</a>                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>                        </div>                    </div>                </td>            </tr>            <tr>                <td>Alma</td>                <td>11/08/2019</td>                <td>420</td>                <td class="text-center"><span class="badge badge-primary">In Progress</span></td>                <td class="text-center">                                        <div class="dropdown custom-dropdown">                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                            <svg> ... </svg>                        </a>                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">                            <a class="dropdown-item" href="javascript:void(0);">Download</a>                            <a class="dropdown-item" href="javascript:void(0);">Share</a>                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>                        </div>                    </div>                </td>            </tr>            <tr>                <td>Kelly</td>                <td>12/08/2019</td>                <td>130</td>                <td class="text-center"><span class="badge badge-warning">Suspended</span></td>                <td class="text-center">                                        <div class="dropdown custom-dropdown">                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                            <svg> ... </svg>                        </a>                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">                            <a class="dropdown-item" href="javascript:void(0);">Download</a>                            <a class="dropdown-item" href="javascript:void(0);">Share</a>                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>                        </div>                    </div>                </td>            </tr>            <tr>                <td>Xavier</td>                <td>13/08/2019</td>                <td>260</td>                <td class="text-center"><span class="badge badge-danger">Blocked</span></td>                <td class="text-center">                                        <div class="dropdown custom-dropdown">                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                            <svg> ... </svg>                        </a>                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">                            <a class="dropdown-item" href="javascript:void(0);">Download</a>                            <a class="dropdown-item" href="javascript:void(0);">Share</a>                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>                        </div>                    </div>                </td>            </tr>            <tr>                <td>Andy</td>                <td>14/08/2019</td>                <td>99</td>                <td class="text-center"><span class="badge badge-secondary">On leave</span></td>                <td class="text-center">                                                                        <div class="dropdown custom-dropdown">                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                            <svg> ... </svg>                        </a>                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">                            <a class="dropdown-item" href="javascript:void(0);">Download</a>                            <a class="dropdown-item" href="javascript:void(0);">Share</a>                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>                        </div>                    </div>                </td>            </tr>            <tr>                <td>Justin</td>                <td>15/08/2019</td>                <td>555</td>                <td class="text-center"><span class="badge badge-info">Pending</span></td>                <td class="text-center">                                                                        <div class="dropdown custom-dropdown">                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                            <svg> ... </svg>                        </a>                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">                            <a class="dropdown-item" href="javascript:void(0);">Download</a>                            <a class="dropdown-item" href="javascript:void(0);">Share</a>                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>                        </div>                    </div>                </td>            </tr>            <tr>                <td>Amy</td>                <td>16/08/2019</td>                <td>300</td>                <td class="text-center"><span class="badge badge-dark">Deleted</span></td>                <td class="text-center">                                        <div class="dropdown custom-dropdown">                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                            <svg> ... </svg>                        </a>                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">                            <a class="dropdown-item" href="javascript:void(0);">Download</a>                            <a class="dropdown-item" href="javascript:void(0);">Share</a>                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>                        </div>                    </div>                </td>            </tr>        </tbody>    </table></div>

<div class="table-responsive">    <table class="table table-bordered table-hover table-condensed mb-4">        <thead>            <tr>                <th>Name</th>                <th>Position</th>                <th>Office</th>                <th class="text-center">Action</th>            </tr>        </thead>        <tbody>            <tr>                <td>Xavier</td>                <td>Developer</td>                <td>London</td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>            <tr>                <td>Andy King</td>                <td>Designer</td>                <td>New York</td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>            <tr>                <td>Mary McDonald</td>                <td>Accountant</td>                <td>Amazon</td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>            <tr>                <td>Vincent Carpenter</td>                <td>Data Scientist</td>                <td>Canada</td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>        </tbody>        <tfoot>            <tr>                <th>Name</th>                <th>Position</th>                <th>Office</th>                <th class="text-center">Action</th>            </tr>        </tfoot>    </table></div>

<div class="table-responsive">    <table class="table table-bordered table-hover table-striped table-checkable table-highlight-head mb-4">        <thead>            <tr>                <th class="checkbox-column">                    <div class="custom-control custom-checkbox checkbox-primary">                      <input type="checkbox" class="custom-control-input todochkbox" id="todoAll">                      <label class="custom-control-label" for="todoAll"></label>                    </div>                </th>                <th class="">Name</th>                <th class="">Date</th>                <th class="">Sales</th>                <th class="text-center">Icons</th>            </tr>        </thead>        <tbody>            <tr>                <td class="checkbox-column">                    <div class="custom-control custom-checkbox checkbox-primary">                      <input type="checkbox" class="custom-control-input todochkbox" id="todo-1">                      <label class="custom-control-label" for="todo-1"></label>                    </div>                </td>                <td>                    <p class="mb-0">Shaun Park</p>                </td>                <td>10/08/2019</td>                <td>320</td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Settings"><svg> ... </svg></a> </li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>            <tr>                <td class="checkbox-column">                    <div class="custom-control custom-checkbox checkbox-primary">                      <input type="checkbox" class="custom-control-input todochkbox" id="todo-2">                      <label class="custom-control-label" for="todo-2"></label>                    </div>                </td>                <td>                    <p  class="mb-0">Alma Clarke</p>                </td>                <td>11/08/2019</td>                <td>420</td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Settings"><svg> ... </svg></a> </li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>            <tr>                <td class="checkbox-column">                    <div class="custom-control custom-checkbox checkbox-primary">                      <input type="checkbox" class="custom-control-input todochkbox" id="todo-3">                      <label class="custom-control-label" for="todo-3"></label>                    </div>                </td>                <td>                    <p class="mb-0">Kelly Young</p>                </td>                <td>12/08/2019</td>                <td>130</td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Settings"><svg> ... </svg></a> </li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>            <tr>                <td class="checkbox-column">                    <div class="custom-control custom-checkbox checkbox-primary">                      <input type="checkbox" class="custom-control-input todochkbox" id="todo-4">                      <label class="custom-control-label" for="todo-4"></label>                    </div>                </td>                <td>                    <p  class="mb-0">Vincent Carpenter</p>                </td>                <td>13/08/2019</td>                <td>260</td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Settings"><svg> ... </svg></a> </li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>            <tr>                <td class="checkbox-column">                    <div class="custom-control custom-checkbox checkbox-primary">                      <input type="checkbox" class="custom-control-input todochkbox" id="todo-5">                      <label class="custom-control-label" for="todo-5"></label>                    </div>                </td>                <td>                    <p  class="mb-0">Andy King</p>                </td>                <td>14/08/2019</td>                <td>180</td>                <td class="text-center">                    <ul class="table-controls">                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Settings"><svg> ... </svg></a> </li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Edit"><svg> ... </svg></a></li>                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Delete"><svg> ... </svg></a></li>                    </ul>                </td>            </tr>        </tbody>    </table></div>