技术控

    今日:95| 主题:49531
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Responsive table layout

[复制链接]
经拿滚 发表于 2016-10-4 07:14:22
66 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
One of my pet peeves in web design is how tables are often not optimized for non-desktop experiences. Let’s say I’m viewing Wikipedia on my iPhone, I’m looking through the episode list for    Star Trek: The Next Generation(I grew up in the late 80’s — deal), and the table has a lot of columns and data. There ends up being a lot of back-and-forth side scrolling, device flipping, and general annoyance as I muddle through that user experience.  
  It’s an issue that exists broadly across the web, even though there are several    responsive table solutionsavailable, including this simple, CSS-only pattern:  
      A simple      #responsivetable in      #CSS, in case you forgot we can do this.      https://t.co/U7QOetqzOr      #RWD      @CodePen      pic.twitter.com/M2gkg0Gq4k   
— Matt Smith (@AllThingsSmitty)    July 15, 2016    So what’s the roadblock for using this or another pattern? Time? Effort? How about quick run-through so we can see for ourselves?
  Where to start?

  We’ll create the same table above with some generic HTML:
  1. <table>
  2.   <caption>Statement Summary</caption>
  3.   <thead>
  4.     <tr>
  5.       <th scope="col">Account</th>
  6.       <th scope="col">Due Date</th>
  7.       <th scope="col">Amount</th>
  8.       <th scope="col">Period</th>
  9.     </tr>
  10.   </thead>
  11.   <tbody>
  12.     <tr>
  13.       <td scope="row">Visa - 3412</td>
  14.       <td>04/01/2016</td>
  15.       <td>$1,190</td>
  16.       <td>03/01/2016 - 03/31/2016</td>
  17.     </tr>
  18.   </tbody>
  19. </table>
复制代码
Our table has four columns. Let’s add some basic CSS to better define the table layout:
  1. table {
  2.   border: 1px solid #ccc;
  3.   border-collapse: collapse;
  4.   margin: 0;
  5.   padding: 0;
  6.   table-layout: fixed;
  7.   width: 100%;
  8. }
  9. table tr {
  10.   background: #f8f8f8;
  11.   border: 1px solid #ddd;
  12.   padding: .35em;
  13. }
  14. table th,
  15. table td {
  16.   padding: .625em;
  17.   text-align: center;
  18. }
复制代码
This might look like many other HTML tables you’ve worked with. And probably about now you’re asking, “But how do I get this responsive?”, amirite.
  Gettin’ responsive!

  First, we’ll add a    data-labelattribute to each data cell with a value that represents that column’s name. That will be used for labeling purposes in the responsive layout.  
  1. <td scope="row" data-label="Account">Visa - 3412</td>
  2.   <td data-label="Due Date">04/01/2016</td>
  3.   <td data-label="Amount">$1,190</td>
  4.   <td data-label="Period">03/01/2016 - 03/31/2016</td>
复制代码
Now we can begin writing a CSS media query:
  1. @media screen and (max-width: 600px) {
  2.   table thead {
  3.     display: none;
  4.   }
  5.   table tr {
  6.     border-bottom: 3px solid #ddd;
  7.     display: block;
  8.   }
  9.   table td {
  10.     border-bottom: 1px solid #ddd;
  11.     display: block;
  12.     text-align: right;
  13.   }
  14.   table td:before {
  15.     content: attr(data-label);
  16.     float: left;
  17.   }
  18. }
复制代码
In smaller viewports the    <tr>and    <td>elements will display as block-level and not as table rows and cells. And the    :beforepseudo-class now serves as a label.  
  Here’s our table (flip your device screen between portrait and landscape view):
友荐云推荐




上一篇:Your Docker agenda for the month of October
下一篇:I create iOS apps - is RxSwift for me?
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

dudu2011 发表于 2016-10-4 07:26:08
我曾经跟一个人无数次的擦肩而过,衣服都擦破了,也没擦出火花。
回复 支持 反对

使用道具 举报

ivory 发表于 2016-10-24 13:46:56
嗯哼,嗯哼,姐也坐回沙发。
回复 支持 反对

使用道具 举报

刘才智 发表于 2016-10-28 22:02:37
你觉得该怎么做呢?
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表