<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"><br/> <div class="row"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Sắp xếp theo tên tăng dần A-Z <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Theo tên tăng dần A-Z</a></li> <li><a href="#">Theo tên giảm dần Z-A</a></li> <li><a href="#">Theo Office Location tăng dần A-Z</a></li> <li><a href="#">Theo Office Location giảm dần Z-A</a></li> </ul> </div> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Nhập thông tin cần tìm"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Tìm kiếm</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div> <br/> <table class="table table-striped"> <thead> <tr> <th>Picture</th> <th class="bd">Name</th> <th class="bd">Work Email</th> <th class="bd">Phone</th> <th class="bd">Job Title</th> <th class="bd">Department</th> <th class="bd">Office Location</th> </tr> </thead> <tbody> <tr> <td><img src="http://www.ranthollywood.com/wp-content/uploads/2014/08/1.-Ryan-Gosling.jpg"/></td> <td>Hải Nguyễn</td> <td>hai@o365.vn</td> <td>+84903123456</td> <td>Project Manager</td> <td>R&D</td> <td>Sai Gon</td> </tr> <tr> <td><img src="https://www.picsofcelebrities.com/celebrity/benjamin-king-actor/pictures/large/benjamin-king-actor-kids.jpg"/></td> <td>Khoa Nguyễn</td> <td>khoa@o365.vn</td> <td>+8490654321</td> <td>Developer Lead</td> <td>R&D</td> <td>Sai Gon</td> </tr> <tr> <td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSI4StEVnL9Jwb7nx7ZprxEZVniK5I2B9RqhBPAs_SV5s5RsMAR"/></td> <td>Linh T. Nguyễn</td> <td>linh.t@o365.vn</td> <td>01231672345</td> <td>Designer</td> <td>Web Design</td> <td>Sai Gon</td> </tr> <tr> <td><img src="https://www.biography.com/.image/c_fill%2Ccs_srgb%2Cg_face%2Ch_300%2Cq_80%2Cw_300/MTE4MDAzNDEwOTEwMjE3NzQy/paul-walker-21044993-1-402.jpg"/></td> <td>Thanh Tran Ly</td> <td>thanh.ly.tran@o365.vn</td> <td>0908231234</td> <td>BA/PO</td> <td>Development</td> <td>Sai Gon</td> </tr> <tr> <td><img src="http://media2.intoday.in/indiatoday/images/stories/647_031417015144.jpg"/></td> <td>Hanh Ly</td> <td>hanh@o365.vn</td> <td>0909121231</td> <td>Officer</td> <td>HR</td> <td>Sai Gon</td> </tr> </tbody> </table> </div> </div>

.table td IMG { width: 75px; } .table-striped>tbody>tr:nth-of-type(odd) { background-color: #d7e1d0 !important; } .table th { background-color: #5b9519; color: #fff; } .table th.bd { border-left: 1px solid #fff; } .col-lg-6 { float: right; display: inline-block; } .dropdown { float: left; }