Bootstrap Responsive Desktop Table

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.

Sample Code

Html Form
  1. <!DOCTYPE html>
  2.     <meta charset="UTF-8">
  3.     <title>Bootstrap Responsive Desktop Table</title>
  4.     <link rel="stylesheet" href="css/normalize.css">
  5.     <link rel='css/bootstrap.min.css'>
  6.         <link rel='stylesheet prefetch' href='css/font-awesome.min.css'>
  7.     <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body class="large-screen">
  10. <div class="container">
  11.         <div class="wrap">
  12.     <h1>Bootstrap Responsive Desktop Table</h1><ul>
  13.                 <div class="table-wrapper">
  14.                         <table class="table-responsive card-list-table">
  15.                                 <thead>
  16.                                   <tr>
  17.                                         <th>Column A</th>
  18.                                         <th>Column B</th>
  19.                                         <th>Column C</th>
  20.                                         <th>Column D</th>
  21.                                         <th>Column E</th>
  22.                                         <th>Column F</th>
  23.                                   </tr>
  24.                                 </thead>
  25.                                 <tbody>
  26.                                   <tr>
  27.                                         <td data-title="Column A">Value 1</td>
  28.                                         <td data-title="Column B">Value 2</td>
  29.                                         <td data-title="Column C">Value 3</td>
  30.                                         <td data-title="Column D">Value 4</td>
  31.                                         <td data-title="Column E">Value 5</td>
  32.                                         <td data-title="Column F">Value 6</td>
  33.                                   </tr>
  34.                                   <tr>
  35.                                         <td data-title="Column A">Value 1</td>
  36.                                         <td data-title="Column B">Value 2</td>
  37.                                         <td data-title="Column C">Value 3</td>
  38.                                         <td data-title="Column D">Value 4</td>
  39.                                         <td data-title="Column E">Value 5</td>
  40.                                         <td data-title="Column F">Value 6</td>
  41.                                   </tr>
  42.                                   <tr>
  43.                                         <td data-title="Column A">Value 1</td>
  44.                                         <td data-title="Column B">Value 2</td>
  45.                                         <td data-title="Column C">Value 3</td>
  46.                                         <td data-title="Column D">Value 4</td>
  47.                                         <td data-title="Column E">Value 5</td>
  48.                                         <td data-title="Column F">Value 6</td>
  49.                                   </tr>
  50.                                   <tr>
  51.                                         <td data-title="Column A">Value 1</td>
  52.                                         <td data-title="Column B">Value 2</td>
  53.                                         <td data-title="Column C">Value 3</td>
  54.                                         <td data-title="Column D">Value 4</td>
  55.                                         <td data-title="Column E">Value 5</td>
  56.                                         <td data-title="Column F">Value 6</td>
  57.                                   </tr>
  58.                                   <tr>
  59.                                         <td data-title="Column A">Value 1</td>
  60.                                         <td data-title="Column B">Value 2</td>
  61.                                         <td data-title="Column C">Value 3</td>
  62.                                         <td data-title="Column D">Value 4</td>
  63.                                         <td data-title="Column E">Value 5</td>
  64.                                         <td data-title="Column F">Value 6</td>
  65.                                   </tr>
  66.                                   <tr>
  67.                                         <td data-title="Column A">Value 1</td>
  68.                                         <td data-title="Column B">Value 2</td>
  69.                                         <td data-title="Column C">Value 3</td>
  70.                                         <td data-title="Column D">Value 4</td>
  71.                                         <td data-title="Column E">Value 5</td>
  72.                                         <td data-title="Column F">Value 6</td>
  73.                                   </tr>
  74.                                   <tr>
  75.                                         <td data-title="Column A">Value 1</td>
  76.                                         <td data-title="Column B">Value 2</td>
  77.                                         <td data-title="Column C">Value 3</td>
  78.                                         <td data-title="Column D">Value 4</td>
  79.                                         <td data-title="Column E">Value 5</td>
  80.                                         <td data-title="Column F">Value 6</td>
  81.                                   </tr>
  82.                                   <tr>
  83.                                         <td data-title="Column A">Value 1</td>
  84.                                         <td data-title="Column B">Value 2</td>
  85.                                         <td data-title="Column C">Value 3</td>
  86.                                         <td data-title="Column D">Value 4</td>
  87.                                         <td data-title="Column E">Value 5</td>
  88.                                         <td data-title="Column F">Value 6</td>
  89.                                   </tr>
  90.                                   <tr>
  91.                                         <td data-title="Column A">Value 1</td>
  92.                                         <td data-title="Column B">Value 2</td>
  93.                                         <td data-title="Column C">Value 3</td>
  94.                                         <td data-title="Column D">Value 4</td>
  95.                                         <td data-title="Column E">Value 5</td>
  96.                                         <td data-title="Column F">Value 6</td>
  97.                                   </tr>
  98.                                   <tr>
  99.                                         <td data-title="Column A">Value 1</td>
  100.                                         <td data-title="Column B">Value 2</td>
  101.                                         <td data-title="Column C">Value 3</td>
  102.                                         <td data-title="Column D">Value 4</td>
  103.                                         <td data-title="Column E">Value 5</td>
  104.                                         <td data-title="Column F">Value 6</td>
  105.                                   </tr>
  106.                                   <tr>
  107.                                         <td data-title="Column A">Value 1</td>
  108.                                         <td data-title="Column B">Value 2</td>
  109.                                         <td data-title="Column C">Value 3</td>
  110.                                         <td data-title="Column D">Value 4</td>
  111.                                         <td data-title="Column E">Value 5</td>
  112.                                         <td data-title="Column F">Value 6</td>
  113.                                   </tr>
  114.                                   <tr>
  115.                                         <td data-title="Column A">Value 1</td>
  116.                                         <td data-title="Column B">Value 2</td>
  117.                                         <td data-title="Column C">Value 3</td>
  118.                                         <td data-title="Column D">Value 4</td>
  119.                                         <td data-title="Column E">Value 5</td>
  120.                                         <td data-title="Column F">Value 6</td>
  121.                                   </tr>
  122.                                 </tbody>
  123.                         </table>
  124.                 </div>
  125.         </div>
  126. </div>
  127. </body>
  128. </html>
For the CSS Script
  1. ::-webkit-scrollbar {
  2.   width: 0.15em;
  3.   height: 0.15em;
  4. }
  5.  
  6. ::-webkit-scrollbar-thumb {
  7.   background: slategray;
  8. }
  9.  
  10. ::-webkit-scrollbar-track {
  11.   background: #b8c0c8;
  12. }
  13.  
  14. body {
  15.   scrollbar-face-color: slategray;
  16.   scrollbar-track-color: #b8c0c8;
  17. }
  18.  
  19. body,
  20. html {
  21.   height: 100%;
  22.   width: 100%;
  23. }
  24.  
  25. body {
  26.   font-family: "Roboto";
  27. }
  28.  
  29. .wrap {
  30.   display: -webkit-box;
  31.   display: -webkit-flex;
  32.   display: -ms-flexbox;
  33.   display: flex;
  34.   -webkit-box-align: center;
  35.   -webkit-align-items: center;
  36.       -ms-flex-align: center;
  37.           align-items: center;
  38.   -webkit-box-pack: center;
  39.   -webkit-justify-content: center;
  40.       -ms-flex-pack: center;
  41.           justify-content: center;
  42.   -webkit-box-orient: vertical;
  43.   -webkit-box-direction: normal;
  44.   -webkit-flex-direction: column;
  45.       -ms-flex-direction: column;
  46.           flex-direction: column;
  47.   height: 100%;
  48.   width: 100%;
  49. }
  50.  
  51. body {
  52.   background: #f8f8f8;
  53. }
  54.  
  55. button.btn {
  56.   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  57.   border: 0;
  58.   border-radius: 0px;
  59. }
  60. button.btn i {
  61.   margin-right: 3px;
  62. }
  63.  
  64. body.large-screen .table-wrapper {
  65.   max-width: 800px;
  66. }
  67. body.large-screen .card-list-table {
  68.   background: white;
  69. }
  70. body.large-screen .card-list-table tbody tr {
  71.   background: transparent;
  72.   box-shadow: none;
  73.   margin: 0;
  74. }
  75. body.large-screen .card-list-table tbody tr:nth-of-type(even) {
  76.   background: #dfdfdf;
  77. }
  78. body.large-screen .card-list-table thead {
  79.   display: table-header-group;
  80. }
  81. body.large-screen .card-list-table thead th:last-child {
  82.   box-shadow: none;
  83. }
  84. body.large-screen .card-list-table thead th {
  85.   border-bottom: 1px solid #dfdfdf;
  86.   padding: 12px 24px;
  87. }
  88. body.large-screen .card-list-table tbody tr {
  89.   display: table-row;
  90.   padding-bottom: 0;
  91. }
  92. body.large-screen .card-list-table tbody tr:nth-of-type(even) {
  93.   background: #fff;
  94. }
  95. body.large-screen .card-list-table tbody td {
  96.   border-bottom: 1px solid #dfdfdf;
  97.   cursor: pointer;
  98.   display: table-cell;
  99.   padding: 20px 24px;
  100.   -webkit-transition: background .2s ease-out;
  101.   transition: background .2s ease-out;
  102.   vertical-align: middle;
  103. }
  104. body.large-screen .card-list-table tbody td:after {
  105.   display: none;
  106. }
  107. body.large-screen .card-list-table tbody td:before {
  108.   content: '';
  109. }
  110. body.large-screen .card-list-table tbody tr:hover td {
  111.   background: #fcf3d0;
  112. }
  113.  
  114. .buttons {
  115.   margin: 10px 0 50px;
  116. }
  117.  
  118. .table-wrapper {
  119.   max-width: 300px;
  120.   width: 80%;
  121.   margin: 0 auto 0;
  122.   max-height: 500px;
  123.   overflow-y: scroll;
  124.   position: relative;
  125.   -webkit-transition: all .2s ease-out;
  126.   transition: all .2s ease-out;
  127. }
  128. @media (min-width: 768px) {
  129.   .table-wrapper {
  130.     background: white;
  131.     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  132.   }
  133. }
  134.  
  135. .card-list-table {
  136.   table-layout: fixed;
  137.   background: transparent;
  138.   margin-bottom: 0;
  139.   width: 100%;
  140. }
  141. .card-list-table thead {
  142.   display: none;
  143. }
  144. .card-list-table tbody tr {
  145.   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  146.   background: #fff;
  147.   border-bottom: 1px solid #dfdfdf;
  148.   cursor: pointer;
  149.   display: block;
  150.   padding: 15px 10px;
  151.   margin: 0 0 10px 0;
  152. }
  153. .card-list-table tbody td {
  154.   border: 0;
  155.   display: block;
  156.   padding: 10px 10px 20px 40%;
  157.   position: relative;
  158. }
  159. .card-list-table tbody td:first-of-type::after {
  160.   visibility: hidden;
  161. }
  162. .card-list-table tbody td:after {
  163.   content: '';
  164.   width: calc(100% - 30px);
  165.   display: block;
  166.   margin: 0 auto;
  167.   height: 1px;
  168.   background: #dfdfdf;
  169.   position: absolute;
  170.   left: 0;
  171.   right: 0;
  172.   top: -6px;
  173. }
  174. .card-list-table tbody td:before {
  175.   color: rgba(0, 0, 0, 0.35);
  176.   text-transform: uppercase;
  177.   font-size: .85em;
  178.   content: attr(data-title);
  179.   display: table-cell;
  180.   font-weight: 500;
  181.   height: 100%;
  182.   left: 15px;
  183.   margin: auto;
  184.   position: absolute;
  185.   vertical-align: middle;
  186.   white-space: nowrap;
  187.   width: 40%;
  188. }
  189. .card-list-table thead th {
  190.   text-transform: uppercase;
  191.   font-size: .85em;
  192.   color: rgba(0, 0, 0, 0.35);
  193.   letter-spacing: .5pt;
  194. }
Don't forget to Like and Share. Enjoy Coding.

Add new comment