SHARE
TWEET

Untitled

a guest Jul 24th, 2019 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style>
  2.     .table_card_view
  3.     { border-collapse: collapse; }
  4.  
  5.     @media only screen and (max-width:768px) and (min-width:200px)  {
  6.       .table_card_view, .table_card_view thead, .table_card_view tbody,
  7.       .table_card_view th, .table_card_view td, .table_card_view tr
  8.       { display: block; }  
  9.  
  10.       .table_card_view thead tr
  11.       { position: absolute; top: -9999px; left: -9999px; }
  12.  
  13.      .table_card_view tr {
  14.          border: 1px solid #ccc; margin-top: 4%; border-radius:7px;
  15.      }
  16.  
  17.     .table_card_view td {
  18.       border: none; border-bottom: 0px solid #eee;
  19.       position: relative; padding-left: 50%;
  20.      }
  21.  
  22.     .table_card_view td:before {
  23.         top: 6px; left: 6px; width: 45%;  
  24.         padding-right: 10px;  white-space: nowrap;
  25.        content: attr(data-column); color: #000; font-weight: bold;
  26.      }
  27.   }
  28. </style>
  29.  
  30.  
  31. <body>
  32.  
  33.     <table class="table table-striped table_card_view">    
  34.         <thead>
  35.            <tr>
  36.               <th> Date and Time </th>
  37.               <th>
  38.                  No. of Company 1 Users Processed in Company 2
  39.               </th>
  40.               <th>
  41.                  No. of Company 2 Tickets Processed in Company 2
  42.               </th>    
  43.               <th> Any Error ? </th>
  44.            </tr>
  45.         </thead>
  46.  
  47.         <tbody>
  48.            <tr>
  49.               <td data-column="Date and Time"> 23 July 2019 </td>
  50.               <td data-column="No. of Company 1 Users Processed in Company 2">
  51.               1 </td>
  52.               <td data-column="No. of Company 1 Tickets Processed in Company 2">  
  53.               2 </td>
  54.               <td data-column="Any Sync Error ?"> 0 </td>
  55.            </tr>
  56.            <tr>
  57.               <td data-column="Date and Time"> 24 July 2019 </td>
  58.               <td data-column="No. of Company 1 Users Processed in Company 2">
  59.               1 </td>
  60.               <td data-column="No. of Company 1 Tickets Processed in Company 2">  
  61.               2 </td>
  62.               <td data-column="Any Sync Error ?"> 0 </td>
  63.            </tr>
  64.         </tbody>
  65.  
  66.      </table>
  67.  
  68.  
  69.     </body>
  70.      
  71. td {
  72.     word-break: break-word;
  73. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top