css 纯css自适应页面 示例 

  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>

 

posted @ 2020-02-16 19:38  鸡儿er  阅读(363)  评论(0)    收藏  举报