Advertisement
Guest User

Untitled

a guest
Oct 19th, 2017
78
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
SAS 1.22 KB | None | 0 0
  1. @media only screen and (max-width: 1000px) {
  2.   /* Force table to not be like tables anymore */
  3.   #responsive-order-tables table,
  4.   #responsive-order-tables thead,
  5.   #responsive-order-tables tbody,
  6.   #responsive-order-tables th,
  7.   #responsive-order-tables td,
  8.   #responsive-order-tables tr {
  9.     display: block;
  10.   }
  11.  
  12.   /* Hide table headers (but not display: none;, for accessibility) */
  13.   #responsive-order-tables thead tr {
  14.     position: absolute;
  15.     top: -9999px;
  16.     left: -9999px;
  17.   }
  18.  
  19.   #responsive-order-tables tr { border: 1px solid #ccc; padding: 10px; }
  20.  
  21.   #responsive-order-tables td {
  22.     /* Behave like a "row" */
  23.     border: none;
  24.     border-bottom: 1px solid #eee;
  25.     position: relative;
  26.     padding-left: 25%;
  27.     white-space: normal;
  28.     text-align:left;
  29.   }
  30.  
  31.   #responsive-order-tables td:before {
  32.     /* Now like a table header */
  33.     position: absolute;
  34.     /* Top/left values mimic padding */
  35.     top: 6px;
  36.     left: 6px;
  37.     width: 45%;
  38.     padding-right: 10px;
  39.     white-space: nowrap;
  40.     text-align:left;
  41.     font-weight: bold;
  42.   }
  43.  
  44.   /*
  45.   Label the data
  46.   */
  47.   #responsive-order-tables td:before { content: attr(data-title); }
  48. }
  49. #responsive-order-tables{
  50.   width: 100%;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement