演示：纯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 最新示例: 点击下载 项目简议: 如果再看到关于纯代 ...
随机推荐
- SAMBA用户访问指定的目录
指定某个用户访问一个特定的共享文件夹sfx 用户可以访问abc目录 别的用户不可以访问abc目录 先创建一个用户命令useradd sfx 创建一个smbpasswd用户 在创建这个用户时要先创建一个 ...
- minicom移植到ARM开发平台
minicom需要ncurses库的支持.arm-linux-gcc中并没有此库故需要交叉编译ncurses,否则出现很多头文件.库函数找不到. 软件环境: ncurses-6.0 下载网址:http ...
- C#实现动态网站伪静态，使seo更友好
本教程将使用Visual Studio 2013手把手教你实现webform动态页面的伪静态.本教程配套的C#源码工程可通过我的github下载.地址:https://github.com/shell ...
- 如何快速学习bootstrap
bootstrap中文网http://www.bootcss.com/解决了我所有使用bootstrap的问题,从0开始,下面的全部链接都是该网站的子链接.例子http://v3.bootcss.co ...
- 验证jquery.validate.js
<pre>jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 <a href="ht ...
- 今天把PHP复习了一下.
记录一下今天复习内容. $_GET[''] $_POST $_SESSION $_COOKIE 常用的 $var='a'; global 全局变量$GLOBALS[''] $$var (动态变量名的变 ...
- （转）Asp.net的HttpCookie写入汉字读取时为乱...
今天有个问我:在Asp.net的HttpCookie中写入汉字,读取值为什么全是乱码?其实这是因为文字编码而造成的,汉字是两个编码,所以才会搞出这么个乱码出来!其实解决的方法很简单:只要在写入Cook ...
- 学习java随笔第四篇：运算符
算术运算符 "+":加法运算符,也可做字符连接用途 "-":减法运算符 "*":乘法运算符 "/":除法运算符 &quo ...
- .NET设计模式（9）：桥接模式（Bridge Pattern）
.NET设计模式(9):桥接模式(Bridge Pattern) 桥接模式(Bridge Pattern) --.NET设计模式系列之九 年月 实现代码如下:．．所谓抽象和实现沿着各自维度的变 ...
- jQuery UI 日期控件--datepicker
在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...