<!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. SELECT [Code] ,[AlarmID] ,[ItemName] ,[isDeleted] ,[Remark] FROM [LjlData].[dbo].[T_BaseDetail] union select 0--

    SELECT  [id]       ,[AlarmID]       ,[ItemName]       ,[isDeleted]       ,[Remark]   FROM [LjlData]. ...

  2. 当append里面的标签显示不出来的时候，用下面的方式做

     $("#result_td").append(tem1+tem3)  $("#result_td").append($(tem1+tem3)) 

  3. 關於Validform 控件 值得注意的地方

    Validform控件其實用起來挺方便的,直接百度就能找到官網,有直接的demo做參考.這些我就不提了,我所要說的是關於Validform控件的ajax的提交. Validform中有個參數ajaxP ...

  4. GPS定位，经纬度附近地点查询–C#实现方法

    目前的工作是需要手机查找附近N米以内的商户,功能如下图 数据库中记录了商家在百度标注的经纬度(如:116.412007, 39.947545), 最初想法  以圆心点为中心点,对半径做循环,半径每增加 ...

  5. SQL Server 表字段值转列名 示例

    前几天,同事问我怎样把字段值转换成字段列,就写了一个最简单的Demo分享一下. 代码如下: -- 创建测试表以及添加测试数据create table #temp(a money,b varchar(1 ...

  6. （四）值栈与OGNL

    所有的学习我们必须先搭建好Struts2的环境(1.导入对应的jar包,2.web.xml,3.struts.xml) 第一节:值栈简介 值栈是对应每个请求对象的一套内存数据的封装,Struts2 会 ...

  7. IOS-图片上传到服务器

    //获取document 路径- (NSString *)getDocumentPath{    NSArray *paths = NSSearchPathForDirectoriesInDomain ...

  8. Java之加密(信息摘要)工具类(依赖：java.security.MessageDigest或org.apache.commons.codec.digest.DigestUtils)

    依赖于java.security.MessageDigest,支持MD5,SHA-1,SHA-256 import java.security.MessageDigest; import java.s ...

  9. 从Image Caption Generation理解深度学习

    0. 前面的话 建丁让我写一篇深度学习相关小文章,目标读者是国内的开发者.刚接到这个任务时我是颇为忐忑的,写文章要讲究厚积薄发,如果“水之积也不厚”,“则其负大舟也无力”.因为我自知水平很有限,又不是 ...

  10. js实现中文简繁切换效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...