1. @media
2. only screen and (max-width: 760px),
3. (min-device-width: 768px) and (max-device-width: 1024px)  {
4. /*____________________________________________________TABELE________________________________________________*/
5.         /* Force table to not be like tables anymore */
6.         #bills table, thead, tbody, th, td, tr {
7.                 display: block;
8.         }
9.        
10.         /* Hide table headers (but not display: none;, for accessibility) */
11.         #bills thead tr {
12.                 position: absolute;
13.                 top: -9999px;
14.                 left: -9999px;
15.         }
16.        
17.         #bills tr { border: 1px solid #ccc; }
18.        
19.         #bills td {
20.                 /* Behave  like a "row" */
21.                 border: none;
22.                 border-bottom: 1px solid #eee;
23.                 position: relative;
24.                 padding-left: 50%;
25.         }
26.        
27.        
28.  
29.         #bills td:before {
30.                 /* Now like a table header */
31.                 position: absolute;
32.                 /* Top/left values mimic padding */
33.                 top: 6px;
34.                 left: 6px;
35.                 width: 45%;
36.                 padding-right: 10px;
37.                 white-space: nowrap;
38.         }
39.        
40.         /*
41.         Label the data
42.         */
43.         #bills td:nth-child(1):before { content: "Account: "; }
44.         #bills td:nth-child(2):before { content: "Balance: "; }
45.         #bills td:nth-child(3):before { content: "Currency: "; }
46.         #bills td:nth-child(4):before { content: "Checkbox: "; }
47.         #bills td:nth-child(5):before { content: "Action: "; }
48.  
49.         /*#currency td:nth-child(1):before { content: "Waluta: "; }
50.         #currency td:nth-child(2):before { content: "Kurs: "; }*/
51.  
52.  
53.  
54.  
55.        
56. }