<!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. 复杂对象创建终结者(Builder Pattern)

    捣鼓了很长时间,终于对建造者模式有初步理解,现在写篇记录下.缘起就是创建的对象比较复杂,需按功能分散.类似造一辆汽车,作为汽车厂家,你需要造车身,造轮胎等,精髓在于领导者(Director),领导者指 ...

  2. tem

    有时间需要整理的东西 1.登录 2.后台框架(管理界面) 3.api详细情况调用 4.具有基础操作的模块 5.session 6.操作权限控制

  3. ASP.NET MVC ajax提交 防止CSRF攻击

    //在View中 <script type="text/javascript"> @functions{ public string ToKenHeaderValue( ...

  4. 手机端的表单验证和PC端的不同

    1.手机端:由于页面小的局限性,表单验证从上到下依次进行,如果上一个验证不通过,则给出错误提示,代码中return回去,不必进行下一个的校验: 2.PC端:页面范围大,一般是在表单的后面或者下面,提示 ...

  5. javascript 之原型理解

    最近一直在了解javascript原型的问题,也算是理解了一点,希望把我所理解的,用简单的例子和说明,让更多人清除的去理解javascript原型 1,原型 prototype 是一个什么东西 我们创 ...

  6. 3、bootstrap3.0 栅格偏移 布局中的一个特产

    理解了栅格化,那么栅格偏移也相对容易理解了.v3的偏移分别有以下几种: offset:左外边距(margin-left): pull:右位移(right): push:左位移(left). 其中off ...

  7. window.event对象详细介绍

    1.event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的过程中才有效.event的某些属性只对特定的事件有意义.比如,fromEleme ...

  8. 利用SQL进行推理

    数据库环境:SQL SERVER 2008R2 有如下需求: Baker, Cooper, Fletcher, Miller and Smith住在一座房子的不同楼层.Baker 不住顶层.Coope ...

  9. C++Primer学习笔记

    一.开始 二.基础 三.常用库 四.其他 五.附录

  10. 【转】发布iOS应用程序到苹果APP STORE完整流程

    原文: http://www.cnblogs.com/JuneWang/p/3850859.html 可以为每个app上传5张截图,虽然至少需要上传一张,可能很少有人会只上传一张图片.另外,你还需要分 ...