演示：纯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 最新示例: 点击下载 项目简议: 如果再看到关于纯代 ...
随机推荐
- angularjs 更新局部作用域
前几天项目需要,做了一个背景遮罩的弹出框,html采用js动态添加进去的,结果发现angularjs绑定在这里面不起作用,搜索下解决了,记录下: var smallApplyParent = docu ...
- CentOS7添加第三方源
CentOS由于很追求稳定性,所以官方源中自带的软件不多,因而需要一些第三方源,比如EPEL.ATrpms.ELRepo.Nux Dextop.RepoForge等. EPEL EPEL即Extra ...
- 用Module元素实现SharePoint Webpart Page的自动生成
最近研发的项目中开发了很多的WebPart,每次部署这些WebPart到新环境中总是很麻烦,因为自己要新创建WebpartPage,同时还要把这些WebPart放到指定的WebPart页中去: 为了方 ...
- HTML+CSS基础学习笔记（3）
一.提交按钮.重置按钮 1.type="submit" 提交按钮 2.type="reset" 重置按钮 二.form表单中的label标签 格式: < ...
- javaBean登录注册
package javabean; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.Res ...
- [分词] C#SegList分词辅助类,帮助类 （转载）
点击下载 SegList.rar 主要功能如下最新的SegList分词辅助类,帮助类看下面代码吧 /// <summary> /// 类说明:SegList /// 编 码 人:苏飞 // ...
- SQL For Xml
最近遇到点棘手的问题,大致如下: 1.数据局格式: 企业名称 排口名称 监测时间 监测因子 a b c pH值 a b c 氨氮 a b c 化学需氧量(COD) 企业名称.排口名称 ...
- iOS中打印系统详细日志
Q:如何打印当前的函数和行号? A:我们可以在打印时使用一些预编译宏作为打印参数,来打印当前的函数和行号.如: 1 NSLog(@"%s:%d obj=%@", __func__, ...
- PAT_1010 一元多项式求导
题目描述: 设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数).数字间以空格分隔. ...
- WPF 保存文件
private void button2_Click(object sender, RoutedEventArgs e) { var saveFileDialog1 = new SaveFileDia ...