<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-fluid container-fixed-lg"> <div class="panel panel-transparent"> <div class="panel-heading"> <div class="panel-title">Table Styles for Portal</div> </div> <div class="panel-body"> <div id="tableWithDynamicRows_wrapper" class="dataTables_wrapper"> <div> <table class="table table-striped table-hover table-responsive-block dataTable" id="tableWithDynamicRows"> <thead> <tr role="row"> <th class="" rowspan="1" colspan="1">App name</th> <th class="" rowspan="1" colspan="1">Description</th> <th class="" rowspan="1" colspan="1">Price</th> <th class="" rowspan="1" colspan="1">Notes</th> </tr> </thead> <tbody> <tr role="row" class="odd"> <td class="v-align-middle"> <p>Angry Birds</p> </td> <td class="v-align-middle"> <p>Description goes here</p> </td> <td class="v-align-middle"> <p>FREE</p> </td> <td class="v-align-middle"> <p>Notes go here Notes go here Notes go here Notes go here</p> <p>Notes go here Notes go here Notes go here Notes go here</p> <p>Notes go here Notes go here Notes go here Notes go here</p> <p>Notes go here Notes go here Notes go here Notes go here</p> </td> </tr> <tr role="row" class="even"> <td class="v-align-middle"> <p>Facebook</p> </td> <td class="v-align-middle"> <p>Description goes here</p> </td> <td class="v-align-middle"> <p>FREE</p> </td> <td class="v-align-middle"> <p>Notes go here</p> </td> </tr> <tr role="row" class="odd"> <td class="v-align-middle"> <p>Foursquare</p> </td> <td class="v-align-middle"> <p>Description goes here</p> </td> <td class="v-align-middle"> <p>FREE</p> </td> <td class="v-align-middle"> <p>Notes go here</p> </td> </tr> <tr role="row" class="even"> <td class="v-align-middle"> <p>Hyperlapse</p> </td> <td class="v-align-middle"> <p>Description goes here</p> </td> <td class="v-align-middle"> <p>FREE</p> </td> <td class="v-align-middle"> <p>Notes go here</p> </td> </tr> <tr role="row" class="odd"> <td class="v-align-middle"> <p>Twitter</p> </td> <td class="v-align-middle"> <p>Description goes here</p> </td> <td class="v-align-middle"> <p>FREE</p> </td> <td class="v-align-middle"> <p>Notes go here</p> </td> </tr> </tbody> </table> </div> <div class="row"> <div> <div class="dataTables_paginate"> <ul class=""> <li class="paginate_button previous disabled" id="tableWithDynamicRows_previous"><a href="#" aria-controls="tableWithDynamicRows" data-dt-idx="0" tabindex="0"><i class="pg-arrow_left"></i></a></li> <li class="paginate_button active"><a href="#"><</a></li> <li class="paginate_button active"><a href="#"><b>1</b></a></li> <li class="paginate_button active"><a href="#">2</a></li> <li class="paginate_button active"><a href="#">3</a></li> <li class="paginate_button active"><a href="#">></a></li> <li class="paginate_button next disabled"><a href="#"><i class="pg-arrow_right"></i></a></li> </ul> </div> </div> </div> </div> </div> </div> </div>

body { color: #626262; background: #f1f1f1; font-family: "Segoe UI",Arial,sans-serif; font-size: 14px; font-weight: normal; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; padding: 50px; } .table tbody tr td, .table thead tr th { background: #fff; border-bottom: 1px solid #e6e6e6; /*padding: 10px;*/ padding: 20px; font-size: 14px; } .table tbody tr:hover { cursor: pointer; } .table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th { background-color: #eceaf3; } .dataTables_wrapper div.dataTables_paginate > ul { padding-left: 10px; } .dataTables_wrapper div.dataTables_paginate > ul > li > a { font-size: 12px; color: #626262; text-decoration: none; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { margin-top: 20px!important; } .dataTables_wrapper .dataTables_paginate ul>li { display: inline-block; padding-left: 0; font-size: 11px; }