<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS自适应响应式Table数据表格DEMO演示</title> <style> *{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } body{ font-family: Helvetica; -webkit-font-smoothing: antialiased; background: rgba( 71, 147, 227, 1); } h2{ text-align: center; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; color: white; padding: 30px 0; } /* Table Styles */ .table-wrapper{ margin: 10px 70px 70px; box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 ); } .fl-table { border-radius: 5px; font-size: 12px; font-weight: normal; border: none; border-collapse: collapse; width: 100%; max-width: 100%; white-space: nowrap; background-color: white; } .fl-table td, .fl-table th { text-align: center; padding: 8px; } .fl-table td { border-right: 1px solid #f8f8f8; font-size: 12px; } .fl-table thead th { color: #ffffff; background: #4FC3A1; } .fl-table thead th:nth-child(odd) { color: #ffffff; background: #324960; } .fl-table tr:nth-child(even) { background: #F8F8F8; } /* Responsive */ @media (max-width: 767px) { .fl-table { display: block; width: 100%; } .table-wrapper:before{ content: "Scroll horizontally >"; display: block; text-align: right; font-size: 11px; color: white; padding: 0 0 10px; } .fl-table thead, .fl-table tbody, .fl-table thead th { display: block; } .fl-table thead th:last-child{ border-bottom: none; } .fl-table thead { float: left; } .fl-table tbody { width: auto; position: relative; overflow-x: auto; } .fl-table td, .fl-table th { padding: 20px .625em .625em .625em; height: 60px; vertical-align: middle; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; width: 120px; font-size: 13px; text-overflow: ellipsis; } .fl-table thead th { text-align: left; border-bottom: 1px solid #f7f7f9; } .fl-table tbody tr { display: table-cell; } .fl-table tbody tr:nth-child(odd) { background: none; } .fl-table tr:nth-child(even) { background: transparent; } .fl-table tr td:nth-child(odd) { background: #F8F8F8; border-right: 1px solid #E6E4E4; } .fl-table tr td:nth-child(even) { border-right: 1px solid #E6E4E4; } .fl-table tbody td { display: block; text-align: center; } } </style> </head> <body> <h2>调整浏览器窗口大小查看效果</h2> <div class="table-wrapper"> <table class="fl-table"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>2</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>3</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>4</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>5</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>6</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>7</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>8</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>9</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>10</td> <td>Content</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tbody> </table> </div> <div style="text-align:center;clear:both;"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> </body> </html>
![](https://code.5g-o.com/wp-content/plugins/kama-clic-counter/icons/zip.png)
获取源码: 纯html and css 制作自适应表单据
下载数:65人次, 文件大小: 1.6 KB, 上传日期: 2020年-12月-25日
2,183 人查阅
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 8元 才能查看此处内容!立即支付