github.com/suntong/easygen@v5.3.0+incompatible/test/html-Table-RWD.html (about) 1 <!doctype html> 2 3 <!-- 4 !!! !!! 5 WARNING: Code automatically generated. Editing discouraged. 6 !!! !!! 7 8 --> 9 10 <html lang="en"> 11 <head> 12 <meta charset="utf-8" /> 13 14 <style class="cp-pen-styles">@import "http://fonts.googleapis.com/css?family=Montserrat:300,400,700"; 15 .rwd-table { 16 margin: 1em 0; 17 min-width: 300px; 18 } 19 .rwd-table tr { 20 border-top: 1px solid #ddd; 21 border-bottom: 1px solid #ddd; 22 } 23 .rwd-table th { 24 display: none; 25 } 26 .rwd-table td { 27 display: block; 28 } 29 .rwd-table td:first-child { 30 padding-top: .5em; 31 } 32 .rwd-table td:last-child { 33 padding-bottom: .5em; 34 } 35 .rwd-table td:before { 36 content: attr(data-th) ": "; 37 font-weight: bold; 38 width: 6.5em; 39 display: inline-block; 40 } 41 @media (min-width: 480px) { 42 .rwd-table td:before { 43 display: none; 44 } 45 } 46 .rwd-table th, .rwd-table td { 47 text-align: left; 48 } 49 @media (min-width: 480px) { 50 .rwd-table th, .rwd-table td { 51 display: table-cell; 52 padding: .25em .5em; 53 } 54 .rwd-table th:first-child, .rwd-table td:first-child { 55 padding-left: 0; 56 } 57 .rwd-table th:last-child, .rwd-table td:last-child { 58 padding-right: 0; 59 } 60 } 61 62 body { 63 padding: 0 2em; 64 font-family: Montserrat, sans-serif; 65 -webkit-font-smoothing: antialiased; 66 text-rendering: optimizeLegibility; 67 color: #444; 68 background: #eee; 69 } 70 71 h1 { 72 font-weight: normal; 73 letter-spacing: -1px; 74 color: #34495E; 75 } 76 77 .rwd-table { 78 background: #34495E; 79 color: #fff; 80 border-radius: .4em; 81 overflow: hidden; 82 } 83 .rwd-table tr { 84 border-color: #46627f; 85 } 86 .rwd-table th, .rwd-table td { 87 margin: .5em 1em; 88 } 89 @media (min-width: 480px) { 90 .rwd-table th, .rwd-table td { 91 padding: 1em !important; 92 } 93 } 94 .rwd-table th, .rwd-table td:before { 95 color: #dd5; 96 } 97 </style> 98 99 </head> 100 101 <body> 102 103 104 105 <h2>Android Cell phones</h2> 106 107 <table class="rwd-table"> 108 <tr> 109 <th>Module A</th> 110 <th>Module B</th> 111 <th>Module C</th> 112 </tr> 113 114 <tr> 115 <td>Samsung Galaxy A</td> 116 <td>Samsung Galaxy B</td> 117 <td>Samsung Galaxy C</td> 118 </tr> 119 <tr> 120 <td>Droid X A</td> 121 <td>Droid X B</td> 122 <td>Droid X C</td> 123 </tr> 124 <tr> 125 <td>HTC Desire A</td> 126 <td>HTC Desire B</td> 127 <td>HTC Desire C</td> 128 </tr> 129 </table> 130 131 132 <h2>iPhone Cell phones</h2> 133 134 <table class="rwd-table"> 135 <tr> 136 <th>Module A</th> 137 <th>Module B</th> 138 <th>Module C</th> 139 </tr> 140 141 <tr> 142 <td>Apple iPhone 4 A</td> 143 <td>Apple iPhone 4 B</td> 144 <td>Apple iPhone 4 C</td> 145 </tr> 146 <tr> 147 <td>Apple iPhone 5 A</td> 148 <td>Apple iPhone 5 B</td> 149 <td>Apple iPhone 5 C</td> 150 </tr> 151 <tr> 152 <td>Apple iPhone 6 A</td> 153 <td>Apple iPhone 6 B</td> 154 <td>Apple iPhone 6 C</td> 155 </tr> 156 </table> 157 158 159 <h2>BlackBerry Cell phones</h2> 160 161 <table class="rwd-table"> 162 <tr> 163 <th>Module A</th> 164 <th>Module B</th> 165 <th>Module C</th> 166 </tr> 167 168 <tr> 169 <td>BlackBerry Bold 9650 A</td> 170 <td>BlackBerry Bold 9650 B</td> 171 <td>BlackBerry Bold 9650 C</td> 172 </tr> 173 <tr> 174 <td>BlackBerry 10 A</td> 175 <td>BlackBerry 10 B</td> 176 <td>BlackBerry 10 C</td> 177 </tr> 178 </table> 179 180 181 </body> 182 </html>