krot

mobile table

Aug 10th, 2019
143
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. Max width before this PARTICULAR table gets nasty
  3. This query will take effect for any screen smaller than 760px
  4. and also iPads specifically.
  5. */
  6. @media
  7. only screen and (max-width: 760px),
  8. (min-device-width: 768px) and (max-device-width: 1024px)  {
  9.  
  10.  
  11. table {
  12.   width: 100%;
  13.   border-collapse: collapse;
  14. }
  15. .cover-table{
  16.   width: 100%;
  17. }
  18.  
  19. table tr{
  20. border: 1px solid #ccc;
  21. border-bottom: 5px groove #fff !important;
  22. }
  23.  
  24.     /* Force table to not be like tables anymore */
  25.     table, thead, tbody, th, td, tr {
  26.         display: block;
  27.     }
  28.    
  29.     /* Hide table headers (but not display: none;, for accessibility) */
  30.     thead tr {
  31.         position: absolute;
  32.         top: -9999px;
  33.         left: -9999px;
  34.     }
  35.    
  36.  
  37.    
  38.     td {
  39.         /* Behave  like a "row" */
  40.         border: none;
  41.         border-bottom: 1px solid #eee;
  42.         position: relative;
  43.         padding-left: 50%;
  44.        
  45.         font-size:100% !important;
  46.         text-align:left !important;
  47.         font-size: 100% !important;
  48.         font-weight: normal !important;
  49.     }
  50.    
  51.     td:before {
  52.         /* Now like a table header */
  53.         position: absolute;
  54.         /* Top/left values mimic padding */
  55.         top: 0;
  56.         left: 0;
  57.         width: 45%;
  58.         padding-right: 1px;
  59.         white-space: nowrap;
  60.         font-size: 90% !important;
  61.     }
  62.      
  63.     /*
  64.     Label the data
  65.     */
  66.     td:nth-of-type(1):before { content: "Бренд"; }
  67.     td:nth-of-type(2):before { content: "Артикул"; }
  68.    
  69.     td:nth-of-type(4):before { content: "Наименование"; }
  70.    
  71.     td:empty:after{    content: "-";    }
  72.      
  73. }
RAW Paste Data