Responsive table panel with pagination

Developer
Digital Avinash
Size
2,351 Kb
Views
46,552
  1. Responsive table panel with pagination Previews
  2. Responsive table panel with pagination HTML Codes
  3. Responsive table panel with pagination CSS Codes

How do I make an responsive table panel with pagination?

What is a responsive table panel with pagination? How do you make a responsive table panel with pagination? This script and codes were developed by Digital Avinash on 12 October 2022, Wednesday.

Responsive table panel with pagination Previews
IQ Test

Responsive table panel with pagination - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive table panel with pagination</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <p></p> <h3>Bootstrap Responsive Table Panel with Pagination</h3>
<p> </p> <div class="col-md-10 col-md-offset-1"> <div class="panel panel-default panel-table"> <div class="panel-heading"> <div class="row"> <div class="col col-xs-6"> <h3 class="panel-title">Panel Heading</h3> </div> <div class="col col-xs-6 text-right"> <button type="button" class="btn btn-sm btn-primary btn-create">Create New Task</button> </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>Master Shine</td> <td>[email protected]</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">1</td> <td>Master Shine</td> <td>[email protected]</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">1</td> <td>Master Shine</td> <td>[email protected]</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">1</td> <td>Master Shine</td> <td>[email protected]</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">1</td> <td>Master Shine</td> <td>[email protected]</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> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

Responsive table panel with pagination - Script Codes CSS Codes

body{background:lightgray}
.panel-table .panel-body{ padding:0;
}
.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;
}
/*
used to vertically center elements, may need modification if you're not using default sizes.
*/
.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;
}
Responsive table panel with pagination - Script Codes
Responsive table panel with pagination - Script Codes
Home Page Home
Developer Digital Avinash
Username digitalavinash
Uploaded October 12, 2022
Rating 3
Size 2,351 Kb
Views 46,552
Do you need developer help for Responsive table panel with pagination?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Digital Avinash (digitalavinash) Script Codes
Name
Profile template for artist
Beautiful calendar icon
Footer made in bootstrap
Hide div on click in Jquery
Price table - bootstrap
Four box with css style - bootstrap
Padding div with minus margin, css tricks
3 column html and css div, ready code
Fix div after scroll, in Jquery
Combine css margin top- Shorting code in css
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!