[转]Responsive Tables Demo

本文转自:http://elvery.net/demo/responsive-tables/

A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions.

I work for a really great little web design agency in Brisbane, and you should say hello.

The Unseen Column

This technique, first described by Stuart Curry (@irishstu) involves simply hiding less important columns on smaller screen sizes.

Example

CodeCompanyPriceChangeChange %OpenHighLowVolume
AACAUSTRALIAN AGRICULTURAL COMPANY LIMITED.$1.38-0.01-0.36%$1.39$1.39$1.389,395
AADARDENT LEISURE GROUP$1.15  +0.021.32%$1.14$1.15$1.1356,431
AAXAUSENCO LIMITED$4.00-0.04-0.99%$4.01$4.05$4.0090,641
ABCADELAIDE BRIGHTON LIMITED$3.00  +0.062.04%$2.98$3.00$2.96862,518
ABPABACUS PROPERTY GROUP$1.910.000.00%$1.92$1.93$1.90595,701
ABYADITYA BIRLA MINERALS LIMITED$0.77  +0.022.00%$0.76$0.77$0.7654,567
ACRACRUX LIMITED$3.71  +0.010.14%$3.70$3.72$3.68191,373
ADUADAMUS RESOURCES LIMITED$0.720.000.00%$0.73$0.74$0.728,602,291
AGGANGLOGOLD ASHANTI LIMITED$7.81-0.22-2.74%$7.82$7.82$7.81148
AGKAGL ENERGY LIMITED$13.82  +0.020.14%$13.83$13.83$13.67846,403
AGOATLAS IRON LIMITED$3.17-0.02-0.47%$3.11$3.22$3.105,416,303

Code

The approach I've presented here assumes you know the index of the columns to be hidden. This probably isn't always appropriate, and isn't all that semantic. Another option is to give the <th> and <td> classes based on importance level and code your CSS accordingly.

  1. <table>
  2. <thead>
  3. <tr>
  4. <th>Code</th>
  5. <th>Company</th>
  6. <th class="numeric">Price</th>
  7. <th class="numeric">Change</th>
  8. <th class="numeric">Change %</th>
  9. <th class="numeric">Open</th>
  10. <th class="numeric">High</th>
  11. <th class="numeric">Low</th>
  12. <th class="numeric">Volume</th>
  13. </tr>
  14. </thead>
  15. <tbody>
  16. <tr>
  17. <td>AAC</td>
  18. <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
  19. <td class="numeric">$1.38</td>
  20. <td class="numeric">-0.01</td>
  21. <td class="numeric">-0.36%</td>
  22. <td class="numeric">$1.39</td>
  23. <td class="numeric">$1.39</td>
  24. <td class="numeric">$1.38</td>
  25. <td class="numeric">9,395</td>
  26. </tr>
  27. </tbody>
  28. </table>
  1. @media only screen and (max-width: 800px) {
  2. #unseen table td:nth-child(2),
  3. #unseen table th:nth-child(2) {display: none;}
  4. }
  5.  
  6. @media only screen and (max-width: 640px) {
  7. #unseen table td:nth-child(4),
  8. #unseen table th:nth-child(4),
  9. #unseen table td:nth-child(7),
  10. #unseen table th:nth-child(7),
  11. #unseen table td:nth-child(8),
  12. #unseen table th:nth-child(8){display: none;}
  13. }

Flip Scroll

This technique was first published by David Bushell (@dbushell). For the full low down on this technique visit his post on the technique, Responsive Tables (2). While you're there, it's also worth checking out his responsive calendar proof of concept.

Example

CodeCompanyPriceChangeChange %OpenHighLowVolume
AACAUSTRALIAN AGRICULTURAL COMPANY LIMITED.$1.38-0.01-0.36%$1.39$1.39$1.389,395
AADARDENT LEISURE GROUP$1.15  +0.021.32%$1.14$1.15$1.1356,431
AAXAUSENCO LIMITED$4.00-0.04-0.99%$4.01$4.05$4.0090,641
ABCADELAIDE BRIGHTON LIMITED$3.00  +0.062.04%$2.98$3.00$2.96862,518
ABPABACUS PROPERTY GROUP$1.910.000.00%$1.92$1.93$1.90595,701
ABYADITYA BIRLA MINERALS LIMITED$0.77  +0.022.00%$0.76$0.77$0.7654,567
ACRACRUX LIMITED$3.71  +0.010.14%$3.70$3.72$3.68191,373
ADUADAMUS RESOURCES LIMITED$0.720.000.00%$0.73$0.74$0.728,602,291
AGGANGLOGOLD ASHANTI LIMITED$7.81-0.22-2.74%$7.82$7.82$7.81148
AGKAGL ENERGY LIMITED$13.82  +0.020.14%$13.83$13.83$13.67846,403
AGOATLAS IRON LIMITED$3.17-0.02-0.47%$3.11$3.22$3.105,416,303

Code

The biggest trick to getting this working is to use display: inline-block; on the table rows and white-space: nowrap; on the table body. You'll also need to make use of your favourite float clearing method.

  1. <table>
  2. <thead>
  3. <tr>
  4. <th>Code</th>
  5. <th>Company</th>
  6. <th class="numeric">Price</th>
  7. <th class="numeric">Change</th>
  8. <th class="numeric">Change %</th>
  9. <th class="numeric">Open</th>
  10. <th class="numeric">High</th>
  11. <th class="numeric">Low</th>
  12. <th class="numeric">Volume</th>
  13. </tr>
  14. </thead>
  15. <tbody>
  16. <tr>
  17. <td>AAC</td>
  18. <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
  19. <td class="numeric">$1.38</td>
  20. <td class="numeric">-0.01</td>
  21. <td class="numeric">-0.36%</td>
  22. <td class="numeric">$1.39</td>
  23. <td class="numeric">$1.39</td>
  24. <td class="numeric">$1.38</td>
  25. <td class="numeric">9,395</td>
  26. </tr>
  27. </tbody>
  28. </table>
  1.  
  2. @media only screen and (max-width: 800px) {
  3. #flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
  4. #flip-scroll * html .cf { zoom: 1; }
  5. #flip-scroll *:first-child+html .cf { zoom: 1; }
  6. #flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }
  7.  
  8. #flip-scroll th,
  9. #flip-scroll td { margin: 0; vertical-align: top; }
  10. #flip-scroll th { text-align: left; }
  11. #flip-scroll table { display: block; position: relative; width: 100%; }
  12. #flip-scroll thead { display: block; float: left; }
  13. #flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
  14. #flip-scroll thead tr { display: block; }
  15. #flip-scroll th { display: block; text-align: right; }
  16. #flip-scroll tbody tr { display: inline-block; vertical-align: top; }
  17. #flip-scroll td { display: block; min-height: 1.25em; text-align: left; }
  18.  
  19.  
  20. /* sort out borders */
  21.  
  22. #flip-scroll th { border-bottom: 0; border-left: 0; }
  23. #flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
  24. #flip-scroll tbody tr { border-left: 1px solid #babcbf; }
  25. #flip-scroll th:last-child,
  26. #flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
  27. }

No More Tables

This technique was developed by Chris Coyier (@chriscoyier) and described in his post Responsive Data Tables at css-tricks.com. While you're there, you should probably check out the Responsive Tables Roundup post, which showcases all these techniques and more.

Example

CodeCompanyPriceChangeChange %OpenHighLowVolume
AACAUSTRALIAN AGRICULTURAL COMPANY LIMITED.$1.38-0.01-0.36%$1.39$1.39$1.389,395
AADARDENT LEISURE GROUP$1.15  +0.021.32%$1.14$1.15$1.1356,431
AAXAUSENCO LIMITED$4.00-0.04-0.99%$4.01$4.05$4.0090,641
ABCADELAIDE BRIGHTON LIMITED$3.00  +0.062.04%$2.98$3.00$2.96862,518
ABPABACUS PROPERTY GROUP$1.910.000.00%$1.92$1.93$1.90595,701
ABYADITYA BIRLA MINERALS LIMITED$0.77  +0.022.00%$0.76$0.77$0.7654,567
ACRACRUX LIMITED$3.71  +0.010.14%$3.70$3.72$3.68191,373
ADUADAMUS RESOURCES LIMITED$0.720.000.00%$0.73$0.74$0.728,602,291
AGGANGLOGOLD ASHANTI LIMITED$7.81-0.22-2.74%$7.82$7.82$7.81148
AGKAGL ENERGY LIMITED$13.82  +0.020.14%$13.83$13.83$13.67846,403
AGOATLAS IRON LIMITED$3.17-0.02-0.47%$3.11$3.22$3.105,416,303

Code

This technique as presented here relies on using HTML5 data attributes and accessing them via CSS to specify the column headings. The other option is to hard code the column headings into the CSS, but as we all know content in CSS is a huge no-no.

  1. <table>
  2. <thead>
  3. <tr>
  4. <th>Code</th>
  5. <th>Company</th>
  6. <th class="numeric">Price</th>
  7. <th class="numeric">Change</th>
  8. <th class="numeric">Change %</th>
  9. <th class="numeric">Open</th>
  10. <th class="numeric">High</th>
  11. <th class="numeric">Low</th>
  12. <th class="numeric">Volume</th>
  13. </tr>
  14. </thead>
  15. <tbody>
  16. <tr>
  17. <td data-title="Code">AAC</td>
  18. <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
  19. <td data-title="Price" class="numeric">$1.38</td>
  20. <td data-title="Change" class="numeric">-0.01</td>
  21. <td data-title="Change %" class="numeric">-0.36%</td>
  22. <td data-title="Open" class="numeric">$1.39</td>
  23. <td data-title="High" class="numeric">$1.39</td>
  24. <td data-title="Low" class="numeric">$1.38</td>
  25. <td data-title="Volume" class="numeric">9,395</td>
  26. </tr>
  27. </tbody>
  28. </table>
  1. @media only screen and (max-width: 800px) {
  2. /* Force table to not be like tables anymore */
  3. #no-more-tables table,
  4. #no-more-tables thead,
  5. #no-more-tables tbody,
  6. #no-more-tables th,
  7. #no-more-tables td,
  8. #no-more-tables tr {
  9. display: block;
  10. }
  11.  
  12. /* Hide table headers (but not display: none;, for accessibility) */
  13. #no-more-tables thead tr {
  14. position: absolute;
  15. top: -9999px;
  16. left: -9999px;
  17. }
  18.  
  19. #no-more-tables tr { border: 1px solid #ccc; }
  20.  
  21. #no-more-tables td {
  22. /* Behave like a "row" */
  23. border: none;
  24. border-bottom: 1px solid #eee;
  25. position: relative;
  26. padding-left: 50%;
  27. white-space: normal;
  28. text-align:left;
  29. }
  30.  
  31. #no-more-tables td:before {
  32. /* Now like a table header */
  33. position: absolute;
  34. /* Top/left values mimic padding */
  35. top: 6px;
  36. left: 6px;
  37. width: 45%;
  38. padding-right: 10px;
  39. white-space: nowrap;
  40. text-align:left;
  41. font-weight: bold;
  42. }
  43.  
  44. /*
  45. Label the data
  46. */
  47. #no-more-tables td:before { content: attr(data-title); }
  48. }

转载于:https://www.cnblogs.com/freeliver54/p/5017025.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397145.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Scala函数式对象-有理数

有理数类的表示 实现规范&#xff1a;支持有理数的加减乘除&#xff0c;并支持有理数的规范表示 1.定义Rational 首先&#xff0c;考虑用户如何使用这个类&#xff0c;我们已经决定使用“Immutable”方式来使用Rational对象&#xff0c;我们需要用户在定义Rational对象时提供分…

2020双十一实时大屏_2020拼多多双十一,拼多多双十一活动

2020拼多多双十一&#xff0c;拼多多双十一活动&#xff0c;2020拼多多双十一&#xff0c;拼多多双十一活动2020拼多多双十一&#xff0c;拼多多双十一活动拼多多双11来了全球狂欢节先领券再购物低价风暴 震撼来袭没有最低 只有更低拼多多优惠券商城拼多多优惠商城&#xff0c;…

dataTables本地刷新数据解决只能初始化一次问题

2019独角兽企业重金招聘Python工程师标准>>> dataTables的表格只能初始化一次&#xff0c;这样如果需要动态改变表格数据的话就需要写多个表格&#xff0c;这样很显然不是一个好的解决方案。 dataTables Api提供了刷新数据解决方案&#xff1a; 这里大概说一下案例&…

安装Ubuntu版本linux过程中没有提示设置root用户密码问题的解决办法

原来ubunto不提倡设置root用户&#xff0c;系统安装成功后&#xff0c;root密码是随机的&#xff0c;那么在这种情况下如何得到root权限呐&#xff0c;具体方法如下&#xff1a; 终端中输入&#xff1a;sudo passwd root 此时重新设置原登录用户的密码。 设置成功后在终端继续输…

linux命令headtail

一、head语法head [-n -k ]... [FILE]...//k是数字默认是显示开头前10行。head /etc/passwd显示开头前5行head -5 /etc/passwdhead -n 5 /etc/passwd&#xff08;注意和以下的有-的差别&#xff09;head -n 5 /etc/passwd 除最后k行外&#xff0c;显示剩余所有内容。head -n -5…

用-force –opengl 指令_苹果新系统ios14新功能汇总 轻点背面等小技巧怎么用

在 iOS 14 以及更新系统中&#xff0c;苹果为 iPhone X 以及更新机型带来了“轻点背面”功能&#xff0c;可以让用户轻点手机背面来实现更多操作&#xff0c;并且这项功能还支持“快捷指令”。例如&#xff0c;如果您不希望应用读取剪贴板中私密内容&#xff0c;可以利用“轻点…

PE文件格式(加密与解密3)(一)

本次的了解主要讲解 PE的基本概念、MS-DOS文件头、PE文件头、区块、输入表、输出表等。 这里我将会结合一个简单的小程序来加深我对PE文件结构的了解。 使用学习工具&#xff1a;有StudyPE、LordPE、PEID。 学习PE建议看书。。和自己动手。。。 PE文件&#xff1a; 在WIN上&…

mysql用户_MySQL用户权限管理详解

用户权限管理主要有以下作用&#xff1a;1. 可以限制用户访问哪些库、哪些表2. 可以限制用户对哪些表执行SELECT、CREATE、DELETE、DELETE、ALTER等操作3. 可以限制用户登录的IP或域名4. 可以限制用户自己的权限是否可以授权给别的用户一、用户授权mysql> grant all privile…

对ContentProvider中getType方法的一点理解

在上篇博客中我们介绍了自定义ContentProvider&#xff0c;但是遗漏掉了一个方法&#xff0c;那就是getType&#xff0c;自定义ContentProvider一般用不上getType方法&#xff0c;但我们还是一起来探究下这个方法究竟是干什么的&#xff1f;我们先来看看ContentProvider中对这个…

手把手教Electron+vue的使用

.现如今前端框架数不胜数&#xff0c;尤其是angular、vue吸引一大批前端开发者&#xff0c;在这个高新技术快速崛起的时代&#xff0c;自然少不了各种框架的结合使用。接下来是介绍electronvue的结合使用。 2.Electron是什么&#xff1f;&#xff1f; 对于我来说Electron相当于…

shell循环和分支

循环和分支对代码块的操作是构造组织shell脚本的关键. 循环和分支结构为脚本编程提供了操作代码块的工具.10.1. Loops循环就是重复一些命令的代码块,如果条件不满足就退出循环.for loopsfor arg in [list]这是一个基本的循环结构.它与C的for结构有很大不同.forarg in [list]do …

mysql主从_MySQL主从原理及配置详解

MySQL主从配置及原理&#xff0c;供大家参考&#xff0c;具体内容如下一、环境选择&#xff1a;1.Centos 6.52.MySQL 5.7二、什么是MySQL主从复制MySQL主从复制是其最重要的功能之一。主从复制是指一台服务器充当主数据库服务器&#xff0c;另一台或多台服务器充当从数据库服务…

引导修复 不是活动的_河南省视频数据修复中心

河南省视频数据修复中心 lk6afds河南省视频数据修复中心 文件预览我找到了我要恢复文件&#xff0c;可是&#xff0c;这个文件能能正确恢复呢。没有用的文件不可以删掉吗。我们先来看看盘文件夹都是什么吧。(以下仅限于~系统)一般来说&#xff0c;刚刚安装的电脑系统盘主要包含…

企业日志分析 五大问题需重点注意

资讯 | 安全 | 论坛 | 下载 | 读书 | 程序开发 | 数据库 | 系统 | 网络 | 电子书 | 微信学院 | 站长学院 | 源码 | QQ | 专栏 | 考试 | 系统安全| 网站安全| 企业安全| 网络安全| 工具软件| 杀毒防毒| 加密解密|首页 > 安全 > 企业安全 > 正文企业安全…

sqlite换成mysql_从SQLITE的数据转到MYSQL

接同事需求&#xff0c;要求从SQLITE的数据转到MYSQL&#xff0c;这东西以前也没接触过。这里搜搜&#xff0c;那里试试&#xff0c;下面把过程列一下。主要过程分三步&#xff1a;1&#xff0c;把SQLITE表结构导出来&#xff0c;作一定的格式调整2&#xff0c;把SQLITE数据导出…

python学习笔记(一):python入门

上周六终于开始接触心心念念的python了&#xff0c;本人学习语言算是零基础&#xff0c;java语法比较复杂&#xff0c;所以选择了一个语法相对还是比较简单&#xff0c;而且现在使用也是越来越广泛的python进行了学习。下面就言归正传吧 在学习python之前先来了解下现今比较流行…

MySQL查询优化之explain的深入解析

在分析查询性能时&#xff0c;考虑EXPLAIN关键字同样很管用。EXPLAIN关键字一般放在SELECT查询语句的前面&#xff0c;用于描述MySQL如何执行查询操作、以及MySQL成功返回结果集需要执行的行数。explain 可以帮助我们分析 select 语句,让我们知道查询效率低下的原因,从而改进我…

怎么验证proftpd安装成功_英雄联盟手游泰服安卓账号怎么注册

英雄联盟手游中泰服安卓账号怎么注册&#xff1f;泰服安卓账号的注册流程是怎样的&#xff1f;泰服安卓账号的注册与其他服安卓账号的注册是否一致&#xff1f;接下来就给介绍下手游中泰服安卓账号的注册&#xff0c;希望对各位玩家能有所帮助。英雄联盟游戏新泰服安卓账号怎样…

oracle实现mysql的if_oracle中decode函数 VS mysql中的if函数和case函数

oracle中有decode函数&#xff0c;如下&#xff1a;select sum(decode(sex&#xff0c;男&#xff0c;0,1)) 男生数 from school&#xff1b;统计男生数目&#xff0c;含义为&#xff1a;decode()中sex字段为男时&#xff0c;用1代替&#xff0c;然后计算总和而mysql中没有该函…

mysql 删掉重复数据

--不知道为啥这个mysql外边还要包一层&#xff0c;不然就报错DELETE FROMcourse WHEREname IN ( select mm.name from (SELECTa.name as nameFROMcourse aGROUP BYa. NAMEHAVINGcount(a.NAME) > 1)mm) AND id NOT IN ( select nn.id from (SELECTmin(id) as idFROMcours…