Toggle navigation
TUTORIALS
Computers Basics
HTML
HTML5
CSS
CSS3
SEO
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
REFERENCES
Practice Templates
Bootstrap Templates
PHP Projects
PLUGINS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
QUIZ
INTERVIEW QUESTIONS
GENERAL KNOWLEDGE
CURRENT AFFAIRS
Today Current Affairs
Monthly Current Affairs
ENGLISH
MORE
IPC Sections
New
School Mathematics
Blog
Code Editor
New
EXECUTE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 Snippets Table Panel with Pagination, Free Time Learning</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <style type="text/css"> .panel{ border-radius:2px !important; } .panel-title{ font-size:18px; font-weight:500; } .btn{ border-radius:2px !important; } .panel-table .panel-body{ padding:0; border-radius:2px !important; } .panel-table .panel-body .table-bordered{ border-style: none; margin:0; } .panel-table .panel-body .table-bordered > thead > tr > th:first-of-type { text-align:center; width: 100px; } .panel-table .panel-body .table-bordered > thead > tr > th:last-of-type, .panel-table .panel-body .table-bordered > tbody > tr > td:last-of-type { border-right: 0px; } .panel-table .panel-body .table-bordered > thead > tr > th:first-of-type, .panel-table .panel-body .table-bordered > tbody > tr > td:first-of-type { border-left: 0px; } .panel-table .panel-body .table-bordered > tbody > tr:first-of-type > td{ border-bottom: 0px; } .panel-table .panel-body .table-bordered > thead > tr:first-of-type > th{ border-top: 0px; } .panel-table .panel-footer .pagination{ margin:0; } .panel-table .panel-footer .col{ line-height: 34px; height: 34px; } .panel-table .panel-heading .col h3{ line-height: 30px; height: 30px; } .panel-table .panel-body .table-bordered > tbody > tr > td{ line-height: 34px; } </style> <div class="container"> <div class="row"> <h1>Bootstrap Table Panel with Pagination</h1> <div class="row"> <div class="panel panel-default panel-table"> <div class="panel-heading"> <div class="row"> <div class="col col-xs-6"> <h3 class="panel-title">User Details</h3> </div> <div class="col col-xs-6"></div> </div> </div> <div class="panel-body"> <table class="table table-striped table-bordered table-list"> <thead> <tr> <th><em class="fa fa-cog"></em></th> <th class="hidden-xs">ID</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td align="center"> <a class="btn btn-default"><em class="fa fa-pencil"></em></a> <a class="btn btn-danger"><em class="fa fa-trash"></em></a> </td> <td class="hidden-xs">1</td> <td>v v ramana reddy</td> <td>ramanareddy@example.com</td> </tr> <tr> <td align="center"> <a class="btn btn-default"><em class="fa fa-pencil"></em></a> <a class="btn btn-danger"><em class="fa fa-trash"></em></a> </td> <td class="hidden-xs">2</td> <td>Chanti</td> <td>chanti@example.com</td> </tr> <tr> <td align="center"> <a class="btn btn-default"><em class="fa fa-pencil"></em></a> <a class="btn btn-danger"><em class="fa fa-trash"></em></a> </td> <td class="hidden-xs">3</td> <td>Srinivasulu Reddy</td> <td>vsr@example.com</td> </tr> </tbody> </table> </div> <div class="panel-footer"> <div class="row"> <div class="col col-xs-4">Page 1 of 5 </div> <div class="col col-xs-8"> <ul class="pagination hidden-xs pull-right"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> <ul class="pagination visible-xs pull-right"> <li><a href="#">«</a></li> <li><a href="#">»</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </body> </html>
×
Close
Bootstrap 3 Snippets Table Panel with Pagination, Free Time Learning
Sample Data
