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- 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>