Untitled

<div class="container-xl">
    <div class="table-responsive">
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-5">
                        <h2>Το Προσωπικό <b>μου</b></h2>
                    </div>
                    <div class="col-sm-7">
                        <a href="#" class="btn btn-secondary"><i class="material-icons">&#xE147;</i> <span>Προσθήκη εργαζομένου</span></a>
                    </div>
                </div>
            </div>
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Όνοματεπώνυμο</th>						
                        <th>ΑΜΚΑ</th>
                        <th>Τηλέφωνο</th>
                        <th>Κατάσταση</th>
                        <th>Ενέργεια</th>
                        <th>Από</th>
                        <th>Μέχρι</th>
                        <th></th>
                        <th></th>
                    </tr>
                    
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td><a href="#"> Μερεος Κώστας</a></td>
                        <td>1515115</td>                        
                        <td>6972438888</td>
                        <td><span class="status text-success">&bull;</span>Γραφείο</td>
                        <td>
                          <select class="browser-default custom-select" name="action" style="width: 100px;">
                            <option selected="">Επιλoγή</option>
                            <option value="1">Τηλεργασία</option>
                            <option value="2">Αναστολή σύμβασης εργασίας</option>
                          </select></td>
                        <td><input type="date" name="from" style="width: 50px;"></td>
                        <td><input type="date" name="until" style="width: 50px;"></td>
                        <td>
                          <button class="btn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                            <i class="material-icons">info</i></a> 
                          </button>
                        </td>   
                        <td>
                          <a href="#" class="settings" title="Settings" data-toggle="tooltip"><i class="material-icons">done_outline</i></a>
                        </td> 
                        
                    </tr>
                    <tr>
                      <td>1</td>
                      <td><a href="#"> Μερεος Κώστας</a></td>
                      <td>1515115</td>                        
                      <td>6972438888</td>
                      <td><span class="status text-success">&bull;</span>Γραφείο</td>
                      <td>
                        <select class="browser-default custom-select" name="action" style="width: 100px;">
                          <option selected="">Επιλoγή</option>
                          <option value="1">Τηλεργασία</option>
                          <option value="2">Αναστολή σύμβασης εργασίας</option>
                        </select></td>
                      <td><input type="date" name="from" style="width: 50px;"></td>
                      <td><input type="date" name="until" style="width: 50px;"></td>
                      <td>
                        <button class="btn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                          <i class="material-icons">info</i></a> 
                        </button>
                      </td>   
                      <td>
                        <a href="#" class="settings" title="Settings" data-toggle="tooltip"><i class="material-icons">done_outline</i></a>
                      </td> 
                      <tr>
                        <div class="collapse" id="collapseExample">
                          <div class="d-flex flex-row ">
                            <div class="p-2" style="margin-right:3.6rem; font-weight: bold;">Άδεια ειδικού σκοπoύ</div>
                            <div class="p-2">Από</div>
                            <div class="p-2 date">21.21.21</div>
                            <div class="p-2">Μέχρι</div>
                            <div class="p-2 date">21.21.21</div>
                            <div class="p-2">
                                <button class="btn btn-secondary btn-block">Επαναφορά</button>
                            </div>
                          </div>
                          <div class="d-flex flex-row ">
                            <div class="p-2" style="margin-right:3.6rem; font-weight: bold;">Τηλεργασια</div>
                            <div class="p-2">Από</div>
                            <div class="p-2 date">21.21.21</div>
                            <div class="p-2">Μέχρι</div>
                            <div class="p-2 date">21.21.21</div>
                            <div class="p-2">
                                <button class="btn btn-secondary btn-block">Επαναφορά</button>
                            </div>
                          </div>
                          <div class="d-flex flex-row ">
                            <div class="p-2" style="margin-right:3.6rem; font-weight: bold;">Αναστολή σύμβασης</div>
                            <div class="p-2">Από</div>
                            <div class="p-2 date">21.21.21</div>
                            <div class="p-2">Μέχρι</div>
                            <div class="p-2 date">21.21.21</div>
                            <div class="p-2">
                                <button class="btn btn-secondary btn-block">Επαναφορά</button>
                            </div>
                          </div>
                          </div>
                      </tr>
                  </tr>
                    <tr>
                        <td>2</td>
                        <td><a href="#"> Paula Wilson</a></td>
                        <td>05/08/2014</td>                       
                        <td>Publisher</td>
                        <td><span class="status text-success">&bull;</span> Active</td>
                        <td>
                            <a href="#" class="settings" title="Settings" data-toggle="tooltip"><i class="material-icons">&#xE8B8;</i></a>
                            <a href="#" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE5C9;</i></a>
                        </td>
                    </tr>
                    
                </tbody>
            </table>
            <div class="clearfix">
                <div class="hint-text">Showing <b>5</b> out of <b>25</b> entries</div>
                <ul class="pagination">
                    <li class="page-item disabled"><a href="#">Previous</a></li>
                    <li class="page-item active"><a href="#" class="page-link">1</a></li>
                    <li class="page-item"><a href="#" class="page-link">2</a></li>
                    <li class="page-item"><a href="#" class="page-link">3</a></li>
                    <li class="page-item"><a href="#" class="page-link">4</a></li>
                    <li class="page-item"><a href="#" class="page-link">5</a></li>
                    <li class="page-item"><a href="#" class="page-link">Next</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>