1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>纯CSS自适应响应式Table数据表格DEMO演示</title> 6 7 <style> 8 *{ 9 box-sizing: border-box; 10 -webkit-box-sizing: border-box; 11 -moz-box-sizing: border-box; 12 } 13 body{ 14 font-family: Helvetica; 15 -webkit-font-smoothing: antialiased; 16 background: rgba( 71, 147, 227, 1); 17 } 18 h2{ 19 text-align: center; 20 font-size: 18px; 21 text-transform: uppercase; 22 letter-spacing: 1px; 23 color: white; 24 padding: 30px 0; 25 } 26 27 /* Table Styles */ 28 29 .table-wrapper{ 30 margin: 10px 70px 70px; 31 box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 ); 32 } 33 34 .fl-table { 35 border-radius: 5px; 36 font-size: 12px; 37 font-weight: normal; 38 border: none; 39 border-collapse: collapse; 40 width: 100%; 41 max-width: 100%; 42 white-space: nowrap; 43 background-color: white; 44 } 45 46 .fl-table td, .fl-table th { 47 text-align: center; 48 padding: 8px; 49 } 50 51 .fl-table td { 52 border-right: 1px solid #f8f8f8; 53 font-size: 12px; 54 } 55 56 .fl-table thead th { 57 color: #ffffff; 58 background: #4FC3A1; 59 } 60 61 62 .fl-table thead th:nth-child(odd) { 63 color: #ffffff; 64 background: #324960; 65 } 66 67 .fl-table tr:nth-child(even) { 68 background: #F8F8F8; 69 } 70 71 /* Responsive */ 72 73 @media (max-width: 767px) { 74 .fl-table { 75 display: block; 76 width: 100%; 77 } 78 .table-wrapper:before{ 79 content: "Scroll horizontally >"; 80 display: block; 81 text-align: right; 82 font-size: 11px; 83 color: white; 84 padding: 0 0 10px; 85 } 86 .fl-table thead, .fl-table tbody, .fl-table thead th { 87 display: block; 88 } 89 .fl-table thead th:last-child{ 90 border-bottom: none; 91 } 92 .fl-table thead { 93 float: left; 94 } 95 .fl-table tbody { 96 width: auto; 97 position: relative; 98 overflow-x: auto; 99 }100 .fl-table td, .fl-table th {101 padding: 20px .625em .625em .625em;102 height: 60px;103 vertical-align: middle;104 box-sizing: border-box;105 overflow-x: hidden;106 overflow-y: auto;107 width: 120px;108 font-size: 13px;109 text-overflow: ellipsis;110 }111 .fl-table thead th {112 text-align: left;113 border-bottom: 1px solid #f7f7f9;114 }115 .fl-table tbody tr {116 display: table-cell;117 }118 .fl-table tbody tr:nth-child(odd) {119 background: none;120 }121 .fl-table tr:nth-child(even) {122 background: transparent;123 }124 .fl-table tr td:nth-child(odd) {125 background: #F8F8F8;126 border-right: 1px solid #E6E4E4;127 }128 .fl-table tr td:nth-child(even) {129 border-right: 1px solid #E6E4E4;130 }131 .fl-table tbody td {132 display: block;133 text-align: center;134 }135 }136 </style>137 </head>138 <body>139 140 <h2>调整浏览器窗口大小查看效果</h2>141 <div class="table-wrapper">142 <table class="fl-table">143 <thead>144 <tr>145 <th>Header 1</th>146 <th>Header 2</th>147 <th>Header 3</th>148 <th>Header 4</th>149 <th>Header 5</th>150 </tr>151 </thead>152 <tbody>153 <tr>154 <td>1</td>155 <td>Content</td>156 <td>Content</td>157 <td>Content</td>158 <td>Content</td>159 </tr>160 <tr>161 <td>2</td>162 <td>Content</td>163 <td>Content</td>164 <td>Content</td>165 <td>Content</td>166 </tr>167 <tr>168 <td>3</td>169 <td>Content</td>170 <td>Content</td>171 <td>Content</td>172 <td>Content</td>173 </tr>174 <tr>175 <td>4</td>176 <td>Content</td>177 <td>Content</td>178 <td>Content</td>179 <td>Content</td>180 </tr>181 <tr>182 <td>5</td>183 <td>Content</td>184 <td>Content</td>185 <td>Content</td>186 <td>Content</td>187 </tr>188 <tr>189 <td>6</td>190 <td>Content</td>191 <td>Content</td>192 <td>Content</td>193 <td>Content</td>194 </tr>195 <tr>196 <td>7</td>197 <td>Content</td>198 <td>Content</td>199 <td>Content</td>200 <td>Content</td>201 </tr>202 <tr>203 <td>8</td>204 <td>Content</td>205 <td>Content</td>206 <td>Content</td>207 <td>Content</td>208 </tr>209 <tr>210 <td>9</td>211 <td>Content</td>212 <td>Content</td>213 <td>Content</td>214 <td>Content</td>215 </tr>216 <tr>217 <td>10</td>218 <td>Content</td>219 <td>Content</td>220 <td>Content</td>221 <td>Content</td>222 </tr>223 <tbody>224 </table>225 </div>226 227 <div style="text-align:center;clear:both;">228 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>229 <script src="/follow.js" type="text/javascript"></script>230 </div>231 232 </body>233 </html>
