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>
原文地址：https://www.cnblogs.com/weihexinCode/p/12318272.html
时间： 2024-07-31 13:50:21