Advertisement
Guest User

Untitled

a guest
Jan 12th, 2021
87
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.75 KB | None | 0 0
  1. <style>
  2. .limiter {
  3.   width: 100%;
  4.   margin: 0 auto;
  5. }
  6.  
  7. .container-table100 {
  8.   width: 100%;
  9.  
  10.  
  11.   display: -webkit-box;
  12.   display: -webkit-flex;
  13.   display: -moz-box;
  14.   display: -ms-flexbox;
  15.   display: flex;
  16.   align-items: center;
  17.   justify-content: center;
  18.   flex-wrap: wrap;
  19.   padding: 33px 30px;
  20. }
  21.  
  22. .wrap-table100 {
  23.   width: 1170px;
  24. }
  25.  
  26. table {
  27.   border-spacing: 1;
  28.   border-collapse: collapse;
  29.   background: white;
  30.   border-radius: 10px;
  31.   overflow: hidden;
  32.   width: 100%;
  33.   margin: 0 auto;
  34.   position: relative;
  35. }
  36. table * {
  37.   position: relative;
  38. }
  39. table td, table th {
  40.   padding-left: 8px;
  41. }
  42. table thead tr {
  43.   height: 60px;
  44.   background: #36304a;
  45. }
  46. table tbody tr {
  47.   height: 50px;
  48. }
  49. table tbody tr:last-child {
  50.   border: 0;
  51. }
  52. table td, table th {
  53.   text-align: left;
  54. }
  55. table td.l, table th.l {
  56.   text-align: right;
  57. }
  58. table td.c, table th.c {
  59.   text-align: center;
  60. }
  61. table td.r, table th.r {
  62.   text-align: center;
  63. }
  64.  
  65.  
  66. .table100-head th{
  67.   font-family: OpenSans-Regular;
  68.   font-size: 18px;
  69.   color: #fff;
  70.   line-height: 1.2;
  71.   font-weight: unset;
  72. }
  73.  
  74. tbody tr:nth-child(even) {
  75.   background-color: #f5f5f5;
  76. }
  77.  
  78. tbody tr {
  79.   font-family: OpenSans-Regular;
  80.   font-size: 15px;
  81.   color: #808080;
  82.   line-height: 1.2;
  83.   font-weight: unset;
  84. }
  85.  
  86. tbody tr:hover {
  87.   color: #555555;
  88.   background-color: #f5f5f5;
  89.   cursor: pointer;
  90. }
  91.  
  92. .column1 {
  93.   width: 260px;
  94.   padding-left: 40px;
  95. }
  96.  
  97. .column2 {
  98.   width: 160px;
  99. }
  100.  
  101. .column3 {
  102.   width: 245px;
  103. }
  104.  
  105. .column4 {
  106.   width: 110px;
  107.   text-align: right;
  108. }
  109.  
  110. .column5 {
  111.   width: 170px;
  112.   text-align: right;
  113. }
  114.  
  115. .column6 {
  116.   width: 222px;
  117.   text-align: right;
  118.   padding-right: 62px;
  119. }
  120. @media screen and (max-width: 992px) {
  121.   table {
  122.     display: block;
  123.   }
  124.   table > *, table tr, table td, table th {
  125.     display: block;
  126.   }
  127.   table thead {
  128.     display: none;
  129.   }
  130.   table tbody tr {
  131.     height: auto;
  132.     padding: 37px 0;
  133.   }
  134.   table tbody tr td {
  135.     padding-left: 40% !important;
  136.     margin-bottom: 24px;
  137.   }
  138.   table tbody tr td:last-child {
  139.     margin-bottom: 0;
  140.   }
  141.   table tbody tr td:before {
  142.     font-family: OpenSans-Regular;
  143.     font-size: 14px;
  144.     color: #999999;
  145.     line-height: 1.2;
  146.     font-weight: unset;
  147.     position: absolute;
  148.     width: 40%;
  149.     left: 30px;
  150.     top: 0;
  151.   }
  152.   table tbody tr td:nth-child(1):before {
  153.     content: "Name:";
  154.   }
  155.   table tbody tr td:nth-child(2):before {
  156.     content: "Release Date:";
  157.   }
  158.   table tbody tr td:nth-child(3):before {
  159.     content: "Tags:";
  160.   }
  161.   table tbody tr td:nth-child(4):before {
  162.     content: "Publisher:";
  163.   }
  164.   table tbody tr td:nth-child(5):before {
  165.     content: "Cheap Buy:";
  166.   }
  167.   table tbody tr td:nth-child(6):before {
  168.     content: "Gameplay:";
  169.   }
  170.  
  171.   .column4,
  172.   .column5,
  173.   .column6 {
  174.     text-align: left;
  175.   }
  176.  
  177.   .column4,
  178.   .column5,
  179.   .column6,
  180.   .column1,
  181.   .column2,
  182.   .column3 {
  183.     width: 100%;
  184.   }
  185.  
  186.   tbody tr {
  187.     font-size: 14px;
  188.   }
  189. }
  190.  
  191. @media (max-width: 576px) {
  192.   .container-table100 {
  193.     padding-left: 15px;
  194.     padding-right: 15px;
  195.   }
  196. }
  197. </style>
  198.    
  199.     <div class="limiter">
  200.         <div class="container-table100">
  201.             <div class="wrap-table100">
  202.                 <div class="table100">
  203.                     <table>
  204.                         <thead>
  205.                             <tr class="table100-head">
  206.                                 <th class="column1">Date</th>
  207.                                 <th class="column2">Order ID</th>
  208.                                 <th class="column3">Name</th>
  209.                                 <th class="column4">Price</th>
  210.                                 <th class="column5">Quantity</th>
  211.                                 <th class="column6">Total</th>
  212.                             </tr>
  213.                         </thead>
  214.                         <tbody>
  215.                                 <tr>
  216.                                     <td class="column1">2017-09-29 01:22</td>
  217.                                     <td class="column2">200398</td>
  218.                                     <td class="column3">iPhone X 64Gb Grey</td>
  219.                                     <td class="column4">$999.00</td>
  220.                                     <td class="column5">1</td>
  221.                                     <td class="column6">$999.00</td>
  222.                                 </tr>
  223.                                 <tr>
  224.                                     <td class="column1">2017-09-28 05:57</td>
  225.                                     <td class="column2">200397</td>
  226.                                     <td class="column3">Samsung S8 Black</td>
  227.                                     <td class="column4">$756.00</td>
  228.                                     <td class="column5">1</td>
  229.                                     <td class="column6">$756.00</td>
  230.                                 </tr>
  231.                                 <tr>
  232.                                     <td class="column1">2017-09-26 05:57</td>
  233.                                     <td class="column2">200396</td>
  234.                                     <td class="column3">Game Console Controller</td>
  235.                                     <td class="column4">$22.00</td>
  236.                                     <td class="column5">2</td>
  237.                                     <td class="column6">$44.00</td>
  238.                                 </tr>
  239.                                 <tr>
  240.                                     <td class="column1">2017-09-25 23:06</td>
  241.                                     <td class="column2">200392</td>
  242.                                     <td class="column3">USB 3.0 Cable</td>
  243.                                     <td class="column4">$10.00</td>
  244.                                     <td class="column5">3</td>
  245.                                     <td class="column6">$30.00</td>
  246.                                 </tr>
  247.                                 <tr>
  248.                                     <td class="column1">2017-09-24 05:57</td>
  249.                                     <td class="column2">200391</td>
  250.                                     <td class="column3">Smartwatch 4.0 LTE Wifi</td>
  251.                                     <td class="column4">$199.00</td>
  252.                                     <td class="column5">6</td>
  253.                                     <td class="column6">$1494.00</td>
  254.                                 </tr>
  255.                                 <tr>
  256.                                     <td class="column1">2017-09-23 05:57</td>
  257.                                     <td class="column2">200390</td>
  258.                                     <td class="column3">Camera C430W 4k</td>
  259.                                     <td class="column4">$699.00</td>
  260.                                     <td class="column5">1</td>
  261.                                     <td class="column6">$699.00</td>
  262.                                 </tr>
  263.                                 <tr>
  264.                                     <td class="column1">2017-09-22 05:57</td>
  265.                                     <td class="column2">200389</td>
  266.                                     <td class="column3">Macbook Pro Retina 2017</td>
  267.                                     <td class="column4">$2199.00</td>
  268.                                     <td class="column5">1</td>
  269.                                     <td class="column6">$2199.00</td>
  270.                                 </tr>
  271.                                 <tr>
  272.                                     <td class="column1">2017-09-21 05:57</td>
  273.                                     <td class="column2">200388</td>
  274.                                     <td class="column3">Game Console Controller</td>
  275.                                     <td class="column4">$999.00</td>
  276.                                     <td class="column5">1</td>
  277.                                     <td class="column6">$999.00</td>
  278.                                 </tr>
  279.                                 <tr>
  280.                                     <td class="column1">2017-09-19 05:57</td>
  281.                                     <td class="column2">200387</td>
  282.                                     <td class="column3">iPhone X 64Gb Grey</td>
  283.                                     <td class="column4">$999.00</td>
  284.                                     <td class="column5">1</td>
  285.                                     <td class="column6">$999.00</td>
  286.                                 </tr>
  287.                                 <tr>
  288.                                     <td class="column1">2017-09-18 05:57</td>
  289.                                     <td class="column2">200386</td>
  290.                                     <td class="column3">iPhone X 64Gb Grey</td>
  291.                                     <td class="column4">$999.00</td>
  292.                                     <td class="column5">1</td>
  293.                                     <td class="column6">$999.00</td>
  294.                                 </tr>
  295.                                 <tr>
  296.                                     <td class="column1">2017-09-22 05:57</td>
  297.                                     <td class="column2">200389</td>
  298.                                     <td class="column3">Macbook Pro Retina 2017</td>
  299.                                     <td class="column4">$2199.00</td>
  300.                                     <td class="column5">1</td>
  301.                                     <td class="column6">$2199.00</td>
  302.                                 </tr>
  303.                                 <tr>
  304.                                     <td class="column1">2017-09-21 05:57</td>
  305.                                     <td class="column2">200388</td>
  306.                                     <td class="column3">Game Console Controller</td>
  307.                                     <td class="column4">$999.00</td>
  308.                                     <td class="column5">1</td>
  309.                                     <td class="column6">$999.00</td>
  310.                                 </tr>
  311.                                 <tr>
  312.                                     <td class="column1">2017-09-19 05:57</td>
  313.                                     <td class="column2">200387</td>
  314.                                     <td class="column3">iPhone X 64Gb Grey</td>
  315.                                     <td class="column4">$999.00</td>
  316.                                     <td class="column5">1</td>
  317.                                     <td class="column6">$999.00</td>
  318.                                 </tr>
  319.                                 <tr>
  320.                                     <td class="column1">2017-09-18 05:57</td>
  321.                                     <td class="column2">200386</td>
  322.                                     <td class="column3">iPhone X 64Gb Grey</td>
  323.                                     <td class="column4">$999.00</td>
  324.                                     <td class="column5">1</td>
  325.                                     <td class="column6">$999.00</td>
  326.                                 </tr>
  327.                                
  328.                         </tbody>
  329.                     </table>
  330.                 </div>
  331.             </div>
  332.         </div>
  333.     </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement