请选择 进入手机版 | 继续访问电脑版

技术控

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

[其他] Responsive table layout

[复制链接]
经拿滚 发表于 2016-10-4 07:14:22
81 3
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):
dudu2011 发表于 2016-10-4 07:26:08
我曾经跟一个人无数次的擦肩而过,衣服都擦破了,也没擦出火花。
回复 支持 反对

使用道具 举报

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

使用道具 举报

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

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表