Bootstrap Responsive Desktop Table
Submitted by rinvizle on Friday, July 15, 2016 - 16:15.
Hello guys we will teach you how to create this simple Bootstrap Responsive Desktop Table. In this tutorial you will learn how to create this simple project. I will tell you what is bootstrap, "Bootstrapping" is also used as a term for building a system using itself or more correctly, a predecessor version. We create this application uses a bootstrap script and CSS script. This projects relays to a table of data given. The table composed of Columns and Values, each columns has a data or value that responds if what column that the value specified. See the example code below.
For the CSS Script
Don't forget to Like and Share. Enjoy Coding.
Sample Code
Html Form- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="css/normalize.css">
- <link rel='css/bootstrap.min.css'>
- <link rel='stylesheet prefetch' href='css/font-awesome.min.css'>
- <link rel="stylesheet" href="css/style.css">
- </head>
- <body class="large-screen">
- <div class="container">
- <div class="wrap">
- <div class="table-wrapper">
- <table class="table-responsive card-list-table">
- <thead>
- <tr>
- </tr>
- </thead>
- <tbody>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </body>
- </html>
- ::-webkit-scrollbar {
- width: 0.15em;
- height: 0.15em;
- }
- ::-webkit-scrollbar-thumb {
- background: slategray;
- }
- ::-webkit-scrollbar-track {
- background: #b8c0c8;
- }
- body {
- scrollbar-face-color: slategray;
- scrollbar-track-color: #b8c0c8;
- }
- body,
- html {
- height: 100%;
- width: 100%;
- }
- body {
- font-family: "Roboto";
- }
- .wrap {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- height: 100%;
- width: 100%;
- }
- body {
- background: #f8f8f8;
- }
- button.btn {
- box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
- border: 0;
- border-radius: 0px;
- }
- button.btn i {
- margin-right: 3px;
- }
- body.large-screen .table-wrapper {
- max-width: 800px;
- }
- body.large-screen .card-list-table {
- background: white;
- }
- body.large-screen .card-list-table tbody tr {
- background: transparent;
- box-shadow: none;
- margin: 0;
- }
- body.large-screen .card-list-table tbody tr:nth-of-type(even) {
- background: #dfdfdf;
- }
- body.large-screen .card-list-table thead {
- display: table-header-group;
- }
- body.large-screen .card-list-table thead th:last-child {
- box-shadow: none;
- }
- body.large-screen .card-list-table thead th {
- border-bottom: 1px solid #dfdfdf;
- padding: 12px 24px;
- }
- body.large-screen .card-list-table tbody tr {
- display: table-row;
- padding-bottom: 0;
- }
- body.large-screen .card-list-table tbody tr:nth-of-type(even) {
- background: #fff;
- }
- body.large-screen .card-list-table tbody td {
- border-bottom: 1px solid #dfdfdf;
- cursor: pointer;
- display: table-cell;
- padding: 20px 24px;
- -webkit-transition: background .2s ease-out;
- transition: background .2s ease-out;
- vertical-align: middle;
- }
- body.large-screen .card-list-table tbody td:after {
- display: none;
- }
- body.large-screen .card-list-table tbody td:before {
- content: '';
- }
- body.large-screen .card-list-table tbody tr:hover td {
- background: #fcf3d0;
- }
- .buttons {
- margin: 10px 0 50px;
- }
- .table-wrapper {
- max-width: 300px;
- width: 80%;
- margin: 0 auto 0;
- max-height: 500px;
- overflow-y: scroll;
- position: relative;
- -webkit-transition: all .2s ease-out;
- transition: all .2s ease-out;
- }
- @media (min-width: 768px) {
- .table-wrapper {
- background: white;
- box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
- }
- }
- .card-list-table {
- table-layout: fixed;
- background: transparent;
- margin-bottom: 0;
- width: 100%;
- }
- .card-list-table thead {
- display: none;
- }
- .card-list-table tbody tr {
- box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
- background: #fff;
- border-bottom: 1px solid #dfdfdf;
- cursor: pointer;
- display: block;
- padding: 15px 10px;
- margin: 0 0 10px 0;
- }
- .card-list-table tbody td {
- border: 0;
- display: block;
- padding: 10px 10px 20px 40%;
- position: relative;
- }
- .card-list-table tbody td:first-of-type::after {
- visibility: hidden;
- }
- .card-list-table tbody td:after {
- content: '';
- width: calc(100% - 30px);
- display: block;
- margin: 0 auto;
- height: 1px;
- background: #dfdfdf;
- position: absolute;
- left: 0;
- right: 0;
- top: -6px;
- }
- .card-list-table tbody td:before {
- color: rgba(0, 0, 0, 0.35);
- text-transform: uppercase;
- font-size: .85em;
- content: attr(data-title);
- display: table-cell;
- font-weight: 500;
- height: 100%;
- left: 15px;
- margin: auto;
- position: absolute;
- vertical-align: middle;
- white-space: nowrap;
- width: 40%;
- }
- .card-list-table thead th {
- text-transform: uppercase;
- font-size: .85em;
- color: rgba(0, 0, 0, 0.35);
- letter-spacing: .5pt;
- }
Add new comment
- 120 views