您的位置：首页 > 网站优化 > css  >  纯CSS实现响应式表格适应移动端

纯CSS实现响应式表格适应移动端

 更新时间：2016年9月14日 14:19  点击：1856
由于手机屏幕空间有限，太大的表格很难友好显示，本文介绍一种使用纯CSS实现响应式表格的方法，可以比较完美的在手机端显示。

在屏幕空间充足的情况下，我们可以将表格的每列都完全显式在屏幕上，但在手机下，每列内容会拥挤不堪，甚至出现横向滚动条，用户快速了解每条项目基本情况的效率会大打折扣。

Snip20150407_5


Snip20150407_6


一种优化方法是：使用media queries监测屏幕viewport小于568px时，让单元格(td)独占一行，每行(tr)相互隔离，如同每条项目为一独立的表格，如下图：

Snip20150407_7


现在每条项目便于阅读了，但表头(th)与对应的单元格(td)隔离开了，单元格的具体意义难以理解。那么，隐藏掉表格的thead，单元格内容右对齐，在每个单元格前面插入对应的表头(th)即可解决这个问题，如下图：

Snip20150407_9


伪元素(:before)结合att()表达式(获取伪元素所依附元素的HTML属性值)可完成此任务。当然，我们首先要对每个单元格(td)元素改造：

Snip20150407_10


样式如下：

table {
    border: 1px solid #ccc;
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
}
table tr {
    border: 1px solid #ddd;
    padding: 5px;
}
table th,
table td {
    padding: 10px;
    text-align: center;
}
table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}
/* <= 568px */
@media screen and (max-width: 35.5em) {
    table {
        border: 0;
    }
    table thead {
        display: none;
    }
    table tr {
        margin-bottom: 10px;
        display: block;
        border-bottom: 2px solid #ddd;
    }
    table td {
        display: block;
        text-align: right;
        font-size: 13px;
        border-bottom: 1px dotted #ccc;
    }
    table td:last-child {
        border-bottom: 0;
    }
    table td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
    }
}

大功告成了吗?某些屏幕阅读器(如OSX 和iOS下voiceOver)可朗读伪类插入的内容，这 是否造成了过度提示，会不会影响屏幕阅读器用户的访问效率。而某些屏幕阅读器与浏览器的组合又不会朗读，如何优化呢?

[!--infotagslink--]

相关文章

  • java 画pdf用itext调整表格宽度、自定义各个列宽的方法

    这篇文章主要介绍了java 画pdf用itext调整表格宽度、自定义各个列宽的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-31

  • C#实现动态生成表格的方法

    这篇文章主要介绍了C#实现动态生成表格的方法,是C#程序设计中非常实用的技巧,需要的朋友可以参考下...2020-06-25

  • React引入antd-mobile+postcss搭建移动端

    本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21

  • 基于jquery实现表格无刷新分页

    这篇文章主要介绍了基于jquery实现表格无刷新分页，功能实现了前端排序功能，增加了前端搜索功能，感兴趣的小伙伴们可以参考一下...2016-01-08

  • Vue 自适应高度表格的实现方法

    这篇文章主要介绍了Vue 自适应高度表格的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-14

  • jQuery实现瀑布流布局详解（PC和移动端）

    瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种：等高等宽、等宽不等高、等高不等宽，接下来我们就最为普遍的等宽不等高形式来作为示例。我们用百度图片作为...2015-10-30

  • element表格行列拖拽的实现示例

    本文主要介绍了element表格行列拖拽的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-02

  • JavaScript实现动态生成表格

    这篇文章主要为大家详细介绍了JavaScript实现动态生成表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-02

  • BootStrap和jQuery相结合实现可编辑表格

    这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23

  • vue实现移动端input上传视频、音频

    这篇文章主要为大家详细介绍了vue实现移动端input上传视频、音频，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-18

  • jQuery实现瀑布流布局详解（PC和移动端）

    瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种：等高等宽、等宽不等高、等高不等宽，接下来我们就最为普遍的等宽不等高形式来作为示例。我们用百度图片作为...2015-10-30

  • vue 中使用 vxe-table 制作可编辑表格的使用过程

    这篇文章主要介绍了vue 中使用 vxe-table 制作可编辑表格的使用过程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-08-13

  • 使用c#在word文档中创建表格的方法详解

    本篇文章是对使用c#在word文档中创建表格的方法进行了详细的分析介绍，需要的朋友参考下...2020-06-25

  • Vue项目移动端滚动穿透问题的实现

    这篇文章主要介绍了Vue项目移动端滚动穿透问题的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-20

  • 基于elementUI竖向表格、和并列的案例

    这篇文章主要介绍了基于elementUI竖向表格、和并列的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-26

  • php搜索csv表格中是否存在指定数据

    php搜索csv中的数据原理是打开csv文件，然后一行行搜索指定的内容是否包含在我们读取这代码中，如果是返回true。 //搜索csv中指定内容 代码如下 复制代码...2016-11-25

  • jQuery表格的维护和删除操作

    可以利用js函数来实现对表格的维护和删除，相对于JavaScript简单方便，下面通过实例代码给大家介绍下jQuery表格的维护和删除操作，一起通过本文学习吧...2017-02-08

  • vue.js表格分页示例

    这篇文章主要为大家详细介绍了vue.js表格分页示例，ajax异步加载数据...2016-10-20

  • jQuery实现可以编辑的表格实例详解【附demo源码下载】

    这篇文章主要介绍了jQuery实现可以编辑的表格,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下...2016-07-25

  • Java读取PDF中的表格的方法示例

    本文主要介绍了Java读取PDF中的表格的方法示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-22