<!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实现自适应布局表格的更多相关文章

  1. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  2. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  3. CSS+DIV自适应布局

    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...

  4. 常见css垂直自适应布局（css解决方法）

    css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...

  5. 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  6. CSS流体(自适应)布局下宽度分离原则——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...

  7. CSS之自适应布局webkit-box

    自适应布局webkit-box,在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置百分比宽度和考虑清除 ...

  8. 纯css 图片自适应居中

    html 结构 <div class="container"> <div class="content"></div> &l ...

  9. Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局

    简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 项目主页: Masonry 最新示例: 点击下载 项目简议: 如果再看到关于纯代 ...

随机推荐

  1. python learning_curve函数

    这个函数需要引用sklearn包 import sklearn from sklearn.learning_curve import learning_curve 这个函数的调用格式是: learni ...

  2. js获取元素transform参数得出的个人理解

    之前写页面的时候有试过想用js获取某些元素的translate的数值什么的,但是translate又是transform的子样式(勉强说说),理所当然就是先获取transform样式,再读里面的值. ...

  3. CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\d29b5393\123c3a1c\App_Code.odl3w4o6.dll”--“拒绝访问。 ”

    IIS部署网站或者Webservice时,出现以下问题: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Tempor ...

  4. Android混淆那些事儿

    博客: 安卓之家 微博: 追风917 CSDN: 蒋朋的家 简书: 追风917 博客园:追风917 # Android混淆 Android混淆是Android开发者经常使用的一种用于代码防止被反编译的 ...

  5. 深入理解自定义ListView

    深入理解自定义ListView ListView原理 他是一个系统的原生控件,用列表的形式来显示内容.如果内容过过有1000条左右,我们可以通过手势的上下滑动来查看数据.ListView也不是爆出OO ...

  6. XmlHttpRequest 使用

    1. IE7以后对xmlHttpRequest 对象的创建在不同浏览器上是兼容的.下面的方法是考虑兼容性的,实际项目中一般使用Jquery的ajax请求,可以不考虑兼容性问题. function ge ...

  7. oracle学习笔记1：windows下oracle数据库安装及.net调用oracle数据库

    1.下载32位或64位oracle数据库并且安装,安装时可以选择安装数据库实例或者不安装,如果不安装的话之后可以用Database Configuration Assistant(DBCA) 通过向导 ...

  8. 0-C相关01:NSlog函数介绍。

      NSlog()函数介绍: 首先:NSlog()函数是cocoa的框架中提供的一个方法: 下图中最上方是它在Xcode中的路径: : 同样都是输出函数.下边我们来看一下,在O-C中NSlog()和在 ...

  9. Artificial Intelligence

    //**************************************BEST-FS ALRORITHM IN ARTIFICAL INTELLIGENCE***************** ...

  10. SGU 269. Rooks(DP)

    题意: 给n(<=250)条水平网格,然后在上面放k棋子,每行每列都只能放一个.求方法总数. Solution: 简单的DP, 只要对给出的水平长度排个序就很容易处理了. 需要用到高精度. 偷懒 ...