本文转自：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

Code Company Price Change Change % Open High Low Volume
AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. $1.38 -0.01 -0.36% $1.39 $1.39 $1.38 9,395
AAD ARDENT LEISURE GROUP $1.15   +0.02 1.32% $1.14 $1.15 $1.13 56,431
AAX AUSENCO LIMITED $4.00 -0.04 -0.99% $4.01 $4.05 $4.00 90,641
ABC ADELAIDE BRIGHTON LIMITED $3.00   +0.06 2.04% $2.98 $3.00 $2.96 862,518
ABP ABACUS PROPERTY GROUP $1.91 0.00 0.00% $1.92 $1.93 $1.90 595,701
ABY ADITYA BIRLA MINERALS LIMITED $0.77   +0.02 2.00% $0.76 $0.77 $0.76 54,567
ACR ACRUX LIMITED $3.71   +0.01 0.14% $3.70 $3.72 $3.68 191,373
ADU ADAMUS RESOURCES LIMITED $0.72 0.00 0.00% $0.73 $0.74 $0.72 8,602,291
AGG ANGLOGOLD ASHANTI LIMITED $7.81 -0.22 -2.74% $7.82 $7.82 $7.81 148
AGK AGL ENERGY LIMITED $13.82   +0.02 0.14% $13.83 $13.83 $13.67 846,403
AGO ATLAS IRON LIMITED $3.17 -0.02 -0.47% $3.11 $3.22 $3.10 5,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.

  • HTML
  • CSS
  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. @media only screen and (max-width: 640px) {
  6. #unseen table td:nth-child(4),
  7. #unseen table th:nth-child(4),
  8. #unseen table td:nth-child(7),
  9. #unseen table th:nth-child(7),
  10. #unseen table td:nth-child(8),
  11. #unseen table th:nth-child(8){display: none;}
  12. }

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

Code Company Price Change Change % Open High Low Volume
AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. $1.38 -0.01 -0.36% $1.39 $1.39 $1.38 9,395
AAD ARDENT LEISURE GROUP $1.15   +0.02 1.32% $1.14 $1.15 $1.13 56,431
AAX AUSENCO LIMITED $4.00 -0.04 -0.99% $4.01 $4.05 $4.00 90,641
ABC ADELAIDE BRIGHTON LIMITED $3.00   +0.06 2.04% $2.98 $3.00 $2.96 862,518
ABP ABACUS PROPERTY GROUP $1.91 0.00 0.00% $1.92 $1.93 $1.90 595,701
ABY ADITYA BIRLA MINERALS LIMITED $0.77   +0.02 2.00% $0.76 $0.77 $0.76 54,567
ACR ACRUX LIMITED $3.71   +0.01 0.14% $3.70 $3.72 $3.68 191,373
ADU ADAMUS RESOURCES LIMITED $0.72 0.00 0.00% $0.73 $0.74 $0.72 8,602,291
AGG ANGLOGOLD ASHANTI LIMITED $7.81 -0.22 -2.74% $7.82 $7.82 $7.81 148
AGK AGL ENERGY LIMITED $13.82   +0.02 0.14% $13.83 $13.83 $13.67 846,403
AGO ATLAS IRON LIMITED $3.17 -0.02 -0.47% $3.11 $3.22 $3.10 5,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.

  • HTML
  • CSS
  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. #flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
  3. #flip-scroll * html .cf { zoom: 1; }
  4. #flip-scroll *:first-child+html .cf { zoom: 1; }
  5. #flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }
  6. #flip-scroll th,
  7. #flip-scroll td { margin: 0; vertical-align: top; }
  8. #flip-scroll th { text-align: left; }
  9. #flip-scroll table { display: block; position: relative; width: 100%; }
  10. #flip-scroll thead { display: block; float: left; }
  11. #flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
  12. #flip-scroll thead tr { display: block; }
  13. #flip-scroll th { display: block; text-align: right; }
  14. #flip-scroll tbody tr { display: inline-block; vertical-align: top; }
  15. #flip-scroll td { display: block; min-height: 1.25em; text-align: left; }
  16. /* sort out borders */
  17. #flip-scroll th { border-bottom: 0; border-left: 0; }
  18. #flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
  19. #flip-scroll tbody tr { border-left: 1px solid #babcbf; }
  20. #flip-scroll th:last-child,
  21. #flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
  22. }

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

Code Company Price Change Change % Open High Low Volume
AAC AUSTRALIAN AGRICULTURAL COMPANY LIMITED. $1.38 -0.01 -0.36% $1.39 $1.39 $1.38 9,395
AAD ARDENT LEISURE GROUP $1.15   +0.02 1.32% $1.14 $1.15 $1.13 56,431
AAX AUSENCO LIMITED $4.00 -0.04 -0.99% $4.01 $4.05 $4.00 90,641
ABC ADELAIDE BRIGHTON LIMITED $3.00   +0.06 2.04% $2.98 $3.00 $2.96 862,518
ABP ABACUS PROPERTY GROUP $1.91 0.00 0.00% $1.92 $1.93 $1.90 595,701
ABY ADITYA BIRLA MINERALS LIMITED $0.77   +0.02 2.00% $0.76 $0.77 $0.76 54,567
ACR ACRUX LIMITED $3.71   +0.01 0.14% $3.70 $3.72 $3.68 191,373
ADU ADAMUS RESOURCES LIMITED $0.72 0.00 0.00% $0.73 $0.74 $0.72 8,602,291
AGG ANGLOGOLD ASHANTI LIMITED $7.81 -0.22 -2.74% $7.82 $7.82 $7.81 148
AGK AGL ENERGY LIMITED $13.82   +0.02 0.14% $13.83 $13.83 $13.67 846,403
AGO ATLAS IRON LIMITED $3.17 -0.02 -0.47% $3.11 $3.22 $3.10 5,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.

  • HTML
  • CSS
  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. /* Hide table headers (but not display: none;, for accessibility) */
  12. #no-more-tables thead tr {
  13. position: absolute;
  14. top: -9999px;
  15. left: -9999px;
  16. }
  17. #no-more-tables tr { border: 1px solid #ccc; }
  18. #no-more-tables td {
  19. /* Behave like a "row" */
  20. border: none;
  21. border-bottom: 1px solid #eee;
  22. position: relative;
  23. padding-left: 50%;
  24. white-space: normal;
  25. text-align:left;
  26. }
  27. #no-more-tables td:before {
  28. /* Now like a table header */
  29. position: absolute;
  30. /* Top/left values mimic padding */
  31. top: 6px;
  32. left: 6px;
  33. width: 45%;
  34. padding-right: 10px;
  35. white-space: nowrap;
  36. text-align:left;
  37. font-weight: bold;
  38. }
  39. /*
  40. Label the data
  41. */
  42. #no-more-tables td:before { content: attr(data-title); }
  43. }

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

[转]Responsive Tables Demo相关推荐

  1. wordpress表格筛选_您是否尝试过使用＃1 WordPress插件在您的网站上创建表格？

    wordpress表格筛选 Is there a person who truly enjoys creating tables? Seriously, have you met them? 有没有一 ...

  2. html:漂亮的原生表格_HTML表格：关于它们的所有知识

    html:漂亮的原生表格 by Alexander Gilmanov 亚历山大·吉尔马诺夫(Alexander Gilmanov) HTML表格:关于它们的所有知识 (HTML Tables: All ...

  3. 前端设置画布的高度_Table问题，设置了一个手机页面的Table高度问题

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 我设置了一个Table适应手机尺寸的,但是现在每行高度不会跟着变化,求解答!!!!附上代码 Responsive Tables body { margin ...

  4. css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表

    css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...

  5. web前端开发最佳实践_Web开发人员和设计师的最佳黑色星期五优惠

    web前端开发最佳实践 As Black Friday 2016 is here, we thought that web developers and web designers should al ...

  6. 数据可视化图表插件_7个最佳数据可视化WordPress插件（图表和图表）

    数据可视化图表插件 Do you want to show colorful charts, graphs, pictograms, or infographics on your website? ...

  7. 应用bootstrap模板

    响应式开发相关文章 我们在响应式开发中已经学习了Bootstrap的使用. 当我们在做后台开发时我们并不需要每次都自己去完全的新建一个后台,定义样式. 因为现在能找到一些完整的Bootstrap的后台 ...

  8. 30个后台管理系统模板

    1. Archon Flat Responsive Admin Bootstrap 3 Demo &Download 2. Thin Admin Template Demo &Down ...

  9. Kafka连接器深度解读之JDBC源连接器

    在现实业务中,Kafka经常会遇到的一个集成场景就是,从数据库获取数据,因为关系数据库是一个非常丰富的事件源.数据库中的现有数据以及对该数据的任何更改都可以流式传输到Kafka主题中,在这里这些事件可 ...

最新文章

  1. 洛谷1197星球大战
  2. python dict sorted 排序
  3. Java实现二维数组和稀疏数组的转换
  4. 基克的聚合 机器人_重做秒变神器！基克的聚合成辅助标配
  5. JAVA编程多线程面试常见知识点灵魂拷问(一)
  6. leetcode [35]搜索插入位置/Search Insert Position 优雅的暴力可能比二分查找效率更高
  7. 常系数齐次线性微分方程的解法
  8. 操作的基本原则，每日必读【不断更新中】
  9. torch_points_kernels遭遇 ModuleNotFoundError: No module named ‘torch_points_kernels.points_cpu‘
  10. CSS入门学习笔记（案例+详解）
  11. vue——双层循环嵌套
  12. Tomcat服务器安装、配置教程
  13. 软件测试中一般术语的的英文缩写
  14. 大数据——Hive分析项目案例
  15. Eclipse更新插件时报错解决办法
  16. 解决Arcgis1041安装后 ArcCatalog可以打开而ArcMap打不开报错问题!
  17. 【MATLAB】图像批处理：批量读取图像—＞批量处理—＞批量写入文件夹
  18. 【思科模拟器实验】静态路由和默认路由
  19. linux背光子系统(backlight)
  20. PHP上传大文件视频到阿里云oss分片上传

热门文章

  1. java script this_JavaScript this 关键字
  2. C++中const关键字的使用总结
  3. 160 - 39 damn
  4. leetcode 376. 摆动序列 思考分析
  5. 为什么使用1 * 1 的卷积核
  6. 取地址符和解引用符的区别_（＆）和解引用（*）运算符的地址以及C中的指针...
  7. 显示照片的RGB直方图
  8. Python---实验九
  9. MySQL在DOS下的基本命令操作
  10. 获取两个数的最大值，判断是否相等；