<!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. jQuery滑动并响应事件

    jQuery滑动并打开指定页面: <!DOCTYPE html> <html> <head> <script src="http://code.jq ...

  2. compareTo()

    从字面意思可知这个方法就是比较的意思. 所以该方法有如下两种情况: 1.比较前后的两个字符不相同: (1)     String str = "Hello World"; Stri ...

  3. Java中的I/O流

    import java.io.*//生成代表输入流的对象fis=new FileInputStream("e:/src/from.txt") //生成代表输出流的对象 fos=ne ...

  4. CI框架篇之基础篇（1）

    CodeIgniter 是一套给 PHP 网站开发者使用的应用程序开发框架和工具包.它提供一套丰富的标准库以及简单的接口和逻辑结构, 其目的是使开发人员更快速地进行项目开发.使用 CodeIgnite ...

  5. Chart图形 [功能帮助类] Assistant创建显示图像的标签和文件 （转载）

    点击下载 Assistant.zip /// <summary> /// 类说明:Assistant /// 联系方式:361983679 /// 更新网站:[url=http://www ...

  6. WCF 无法生成 client

    在MVC中调用WCF 总是没有client 后来在网上查找原因,去掉Reuse type in referrenced assenbiles ,就可以生成代理代码.

  7. Qt中，当QDockWidget的父窗口是一个不可以拖动的QTabWidget的时候实现拖动的方法

    之前在做有关QDockWidget的内容时候遇到了瓶颈,那就是窗口弹出来之后拖动不了,也不可以放大和缩小,若是弹出来之后设置成了window的flags,也不可以拖动,而且也不是需要的效果. 1.弹出 ...

  8. Linux + C + Epoll实现高并发服务器(线程池 + 数据库连接池)(转)

    转自:http://blog.csdn.net/wuyuxing24/article/details/48758927 一, 背景 先说下我要实现的功能,server端一直在linux平台下面跑,当客 ...

  9. 【实习记】2014-08-26都是回车惹的祸——shell脚本必须是unix行尾

        事情由起:svn的url在excel里,我复制到txt文本下,vi做些文本处理,只提取了url,保存为url.txt.再用vi处理url.txt,加上svn checkout等词,变成可以运行 ...

  10. Activity启动模式图文详解

    转载自:http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0520/2897.html  英文原文:Understand Android A ...