简单优雅的横向多列长表格自适应手机电脑屏幕响应式CSS

1. <table>
2.  <thead>
3.  <tr>
4.   <th>First Name</th>
5.   <th>Last Name</th>
6.   <th>Job Title</th>
7.  </tr>
8.  </thead>
9.  <tbody>
10.  <tr>
11.   <td>James</td>
12.   <td>Matman</td>
13.   <td>Chief Sandwich Eater</td>
14.  </tr>
15.  <tr>
16.   <td>The</td>
17.   <td>Tick</td>
18.   <td>Crimefighter Sorta</td>
19.  </tr>
20.  </tbody>
21. </table>

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)  {
10.  /* Force table to not be like tables anymore */
11.  table, thead, tbody, th, td, tr { 
12.   display: block; 
13.  }
14.  
15.  /* Hide table headers (but not display: none;, for accessibility) */
16.  thead tr { 
17.   position: absolute;
18.   top: -9999px;
19.   left: -9999px;
20.  }
21.  
22.  tr { border: 1px solid #ccc; }
23.  
24.  td { 
25.   /* Behave  like a "row" */
26.   border: none;
27.   border-bottom: 1px solid #eee; 
28.   position: relative;
29.   padding-left: 50%; 
30.  }
31.  
32.  td:before { 
33.   /* Now like a table header */
34.   position: absolute;
35.   /* Top/left values mimic padding */
36.   top: 6px;
37.   left: 6px;
38.   width: 45%; 
39.   padding-right: 10px; 
40.   white-space: nowrap;
41.  }
42.  
43.  /*
44.  Label the data
45.  */
46.  td:nth-of-type(1):before { content: "First Name"; }
47.  td:nth-of-type(2):before { content: "Last Name"; }
48.  td:nth-of-type(3):before { content: "Job Title"; }
49.  td:nth-of-type(4):before { content: "Favorite Color"; }
50.  td:nth-of-type(5):before { content: "Wars of Trek?"; }
51.  td:nth-of-type(6):before { content: "Secret Alias"; }
52.  td:nth-of-type(7):before { content: "Date of Birth"; }
53.  td:nth-of-type(8):before { content: "Dream Vacation City"; }
54.  td:nth-of-type(9):before { content: "GPA"; }
55.  td:nth-of-type(10):before { content: "Arbitrary Data"; }
56. }