<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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="near_by_hotel_wrapper"> <div class="near_by_hotel_container"> <table class="table no-border custom_table dataTable no-footer dtr-inline"> <colgroup> <col width="40%"> <col width="20%"> <col width=""> </colgroup> <thead> <tr> <th>ROOM CATEGORY</th> <th class="text-center">RACK RATES</th> <th class="text-center">SPECIAL RATES</th> </tr> </thead> <tbody> <tr> <td>DELUXE ROOM (Single Occupancy)</td> <td class="text-center">US$ 700++</td> <td class="text-center">US$ 200++</td> </tr> <tr> <td>Club ROOM (Single Occupancy)</td> <td class="text-center">US$ 900++</td> <td class="text-center">US$ 275++</td> </tr> <tr> <td>Junior Suite </td> <td class="text-center">US$ 1,100++</td> <td class="text-center">US$ 360++</td> </tr> </tbody> </table> </div> </div>

.near_by_hotel_wrapper{ background:#f5f5f5; } .custom_table { border-collapse: separate; border-spacing: 0 10px; margin-top: -3px !important; } .custom_table thead tr th { padding: 0px 8px; font-size: 16px; border: 0 none !important; border-top: 0 none !important; } .custom_table tbody tr { -moz-box-shadow: 0 2px 3px #e0e0e0; -webkit-box-shadow: 0 2px 3px #e0e0e0; box-shadow: 0 2px 3px #e0e0e0; } .near_by_hotel_wrapper table tr td { border-right: 1px solid #d2d1d1; } .custom_table tbody tr td { background: #fff none repeat scroll 0 0; border-top: 0 none !important; margin-bottom: 20px; padding: 10px 8px; font-size: 16px; } .near_by_hotel_wrapper table tr td { border-right: 1px solid #d2d1d1; }