CSS3 table — 自适应布局表格
2017-01-20 13:32
330 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>演示:纯CSS实现自适应布局表格</title> <style type="text/css"> body { font-family: arial; background:#fff; } table { border: 1px solid #ccc; width: 80%; margin:0; padding:0; border-collapse: collapse; border-spacing: 0; margin: 0 auto; } table tr { border: 1px solid #ddd; padding: 5px; } table th, table td { padding: 10px; text-align: center; } table th { text-transform: uppercase; font-size: 14px; letter-spacing: 1px; } @media screen and (max-width: 600px) { table { border: 0; } table thead { display: none; } table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; } table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; } table td:last-child { border-bottom: 0; } table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } } .note{max-width: 80%; margin: 0 auto;} </style> </head> <body> <div class="note"> <h1>演示:纯CSS实现自适应布局表格(缩小显示区域看下)</h1> <p>调整页面宽度,或者在不同屏幕尺寸的设备上(PC,手机)尝试浏览器本页,你会发现下面的表格呈现出自适应布局特征,能够自动的使用不同的屏幕尺寸,数据的表现不会因为屏幕大小变化而变得不合适。</p> </div> <table> <thead> <tr> <th>支付</th> <th>日期</th> <th>金额</th> <th>周期</th> </tr> </thead> <tbody> <tr> <td data-label="支付">支付 #1</td> <td data-label="日期">02/01/2015</td> <td data-label="金额">¥2,311</td> <td data-label="周期">01/01/2015 - 01/31/2015</td> </tr> <tr> <td data-label="支付">支付 #2</td> <td data-label="日期">03/01/2015</td> <td data-label="金额">¥3,211</td> <td data-label="周期">02/01/2015 - 02/28/2015</td> </tr> </tbody> </table> </body> </html>
相关文章推荐
- TableLayout表格布局,自适应内容
- android:TableLayout表格布局详解
- TableLayout 表格布局管理器
- 纯CSS3实现table表格隔行变色并hover变色。
- Android学习笔记十五之TableLayout表格布局
- 五布局之表格布局TableLayout
- TableLayout表格布局详解
- Android 布局详解 -三表格布局(TableLayout)以及重要属性
- display:table-cell两列自适应布局
- Android开发中TableLayout表格布局
- android:TableLayout表格布局详解
- Android 表格布局<TableLayout>
- 不用table仅用div标签,利用CSS3的Flexbox属性,实现跨行和跨列的表格或网格
- web前端_表格table布局,同一列两个<td>之间有间隙解决办法。
- Android 布局详解 -三表格布局(TableLayout)以及重要属性
- 【前端H5】bootstrap-table表格插件使用js设置高度及高度自适应
- 第15章、布局Layouts之TableLayout表格布局(从零开始学Android)
- Android学习 9-> 表格布局TableLayout和网格布局GridLayout
- table表格布局,表头固定不动,表身超出可滑动
- Android零基础入门第29节:善用TableLayout表格布局,事半功倍