1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <!DOCTYPE html><html> <head> <style type="text/css"> body { font-family: arial; } table { border: 1px solid #ccc; width: 100%; margin:0; padding:0; border-collapse: collapse; border-spacing: 0; } table tr { border: 1px solid #ddd; padding: 5px; } table th, table td { padding: 10px; text-align: center; } table th { text-transform: uppercase; font-size: 14px; letter-spacing: 1px; } @media screen and (max-width: 600px) { table { border: 0; } table thead { display: none; } table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; } table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; } table td:last-child { border-bottom: 0; } table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } } </style> </head> <body> <table> <thead> <tr> <th>Payment</th> <th>Issue Date</th> <th>Amount</th> <th>Period</th> </tr> </thead> <tbody> <tr> <td data-label="Payment">Payment #1</td> <td data-label="Issue Date">02/01/2015</td> <td data-label="Amount">$2,311</td> <td data-label="Period">01/01/2015 - 01/31/2015</td> </tr> <tr> <td data-label="Payment">Payment #2</td> <td data-label="Issue Date">03/01/2015</td> <td data-label="Amount">$3,211</td> <td data-label="Period">02/01/2015 - 02/28/2015</td> </tr> </tbody> </table> </body></html> |
原始尺寸表格效果
代码主要运用到了@media来判断调用的样式，伪元素:before,:after来匹配相关内容，以及用content: attr(data-label)来获取自定属性中的值，缩放及手机效果，
