karmaworld/assets/css/responsive-tables.css

   1 /* Foundation v2.1.4 http://foundation.zurb.com */
   2 /* Artfully masterminded by ZURB  */
   3
   4 /* --------------------------------------------------
   5    Table of Contents
   6 -----------------------------------------------------
   7 :: Shared Styles
   8 :: Page Name 1
   9 :: Page Name 2
  10 */
  11
  12
  13 /* -----------------------------------------
  14    Shared Styles
  15 ----------------------------------------- */
  16
  17 table th { font-weight: bold; }
  18 table td, table th { padding: 9px 10px; text-align: left; }
  19
  20 /* Mobile */
  21 @media only screen and (max-width: 767px) {
  22
  23         table.responsive { margin-bottom: 0; }
  24
  25         .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
  26         .pinned table { border-right: none; border-left: none; width: 100%; }
  27         .pinned table th, .pinned table td { white-space: nowrap; }
  28         .pinned td:last-child { border-bottom: 0; }
  29
  30         div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
  31         div.table-wrapper div.scrollable table { margin-left: 35%; }
  32         div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
  33
  34         table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
  35         table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
  36
  37 }
  38
  39 /* -----------------------------------------
  40    Page Name 1
  41 ----------------------------------------- */
  42
  43
  44
  45
  46 /* -----------------------------------------
  47    Page Name 2
  48 ----------------------------------------- */
  49
  50