演示：纯CSS实现自适应布局表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示：纯CSS实现自适应布局表格</title>
<style type="text/css">
body {
font-family: arial;
}
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>
演示：纯CSS实现自适应布局表格的更多相关文章
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- CSS流体(自适应)布局下宽度分离原则
CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...
- CSS+DIV自适应布局
CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...
- 常见css垂直自适应布局（css解决方法）
css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...
- 常见css水平自适应布局
左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- CSS流体(自适应)布局下宽度分离原则——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...
- CSS之自适应布局webkit-box
自适应布局webkit-box,在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置百分比宽度和考虑清除 ...
- 纯css 图片自适应居中
html 结构 <div class="container"> <div class="content"></div> &l ...
- Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局
简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 项目主页: Masonry 最新示例: 点击下载 项目简议: 如果再看到关于纯代 ...
随机推荐
- centos 安装mysqldb 记录
vim setup_pofix.py #修改mysql_config路径 <pre> ln -s /usr/local/mysql/lib/libmysqlclient.so.18 /us ...
- RedHat7上安装MariaDB
编译安装MariaDB 下载MariaDB# wget http://mirrors.opencas.cn/mariadb//mariadb-10.1.8/source/mariadb-10.1.8. ...
- android java获取当前时间的总结
import java.text.SimpleDateFormat; SimpleDateFormat formatter = new SimpleDateFormat (&q ...
- mvc性能优化
mvc性能优化 (1)移动设备卡顿问题 -1请求方式 在mvc中GET请求有问题,出现错误 在MVC中在进行GET请求获取JSON数据时,需要进行如下设置: return Json("&qu ...
- Access的转义字符
Access中数据库转义字符规则: 插入.更新.=匹配 数据时,文本类型如用''括起来,中间可以有 ",*,%,[,],/,/,?,(,),{,}的任意组合,如要插入一个',需写''并在整个 ...
- js原型解析
我们都知道javascript因为具有了继承以及变量等等一系列的特性之后才被人们认为具有一门编程语言的资格,在后续的不断发展中,js在原生的基础上扩展了基于jquery等等的库,甚至衍生了像node. ...
- Java-jfree报表（学习整理）----饼状图、柱状图、折线统计图
1.使用的报表工具: jfree报表 2.下载网址: http://www.jfree.org/ 下载之后先解压:如下图 下载后:需要的jar包!如下图: 打开:找到以下的两个jar包 再导入开发项目 ...
- windows8一直更新不了的问题————解决方案
以下是微软官方工程师的详细解答: 尊敬的佐先生: 您好! 感谢您联系微软技术支持!我是微软技术支持工程师,我姓张.我将协助您解决有关问题.您的问题编号是SRX 1274238225 对于您当前的更新问 ...
- ACM Sdut 2158 Hello World!(数学题,排序) (山东省ACM第一届省赛C题)
题目描述 We know thatIvan gives Saya three problems to solve (Problem F), and this is the firstproblem. ...
- 实现基于文件存储的Session类
自主实现Session功能的类,基于文件方式存储Session数据,测试基本通过,还比较好玩,实际应用没有意义,只不过是学习Session是如何实现的. 一般基于文件存储Session数据效率不是很高 ...