1. 首页
  2. css

使用最小的CSS使表响应

下面是布拉德利Taunt的一个极好的CSS技巧,他展示了如何在移动设备上使用一点额外的代码使表工作。他将每一个表格行设计成这样的卡片:

(一定要抓起笔,让它小一点,看看设计是如何响应的。)

布拉德利的示例标记看起来是这样的-干净、可访问、规则的ol\”HTML:

<table><thead><tr><th>Type of Food</th><th>Calories</th><th>Tasty Factor</th></tr></thead><tbody><tr><td><span>Type of Food</span> Slice of Pizza</td><td><span>Calories</span> 450</td><td><span>Tasty Factor</span> 95%</td></tr></tbody></table>

他是如何使卡片产生效果的?他在更小的屏幕上使用flexbox,并设置span元素来显示它们自己。

但是!我不太喜欢那些跨度。它们隐藏在更大的屏幕上,但是标记仍然存在,所以我觉得它不是特别干净。不久前我在做一个项目,我们偶然发现了同样的问题。我们决定在每个td上使用数据属性,如下所示:

<table><thead><tr><th>Type of Food</th><th>Calories</th><th>Tasty Factor</th></tr></thead><tbody><tr><td>

Then we can grab that data attribute in our styles and render it on the page in a pseudo element:

td:before {content: attr(data-title);}

从那里我们绝对地将伪元素定位到一边,并且只在带有媒体查询的较小屏幕上显示它。我不确定它的可访问性含义,但在我看来,它只是感觉更容易阅读和理解。

不管怎样,我认为这篇文章都是一个很好的提醒,提醒你一旦开始使用表格,就会出现所有棘手的问题。有很多方法可以做出相应的处理,这些决定应该完全根据设计的上下文做出。

响应表…

当您需要比较上下列的数据时,最好不要使用表结构,允许滚动。如果每一行都可以分开,并且仍然有用,那么折叠它们以避免滚动是非常必要的不错.httpshttp://t.co/zeMFdrwU1Mpic.twitter.com/3z8hQDvNAZ

-CSS技巧(@CSS)2019年10月11日

使用最小的CSS使表响应 为WP2原创文章,链接:https://www.wp2.cn/css/%e4%bd%bf%e7%94%a8%e6%9c%80%e5%b0%8f%e7%9a%84css%e4%bd%bf%e8%a1%a8%e5%93%8d%e5%ba%94/

发表评论

您的电子邮箱地址不会被公开。