怎样实现表格在移动端能左右滑动查看

zbit 2018-09-22 01:15:03

表格太宽了，怎样实现表格在移动端能左右滑动查看，像百度百科里面的表格那样。最好能给一个实例。

...全文

2266 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2018-09-22

打赏
举报

回复

设置个div 样式为 width: 100%; overflow-x: auto; 把表格放div中 <div style="width: 100%; overflow-x: auto;"> <table>.........</table> </div>

解决表格内容过多导致宽度和高度超过可视区域，本实例的思路在移动端和pc端都是可行的，只是本实例中初始的内容宽度只有在小屏幕的宽度下才能完美展示，所以请在移动端模式下查看本实例。我是设置成0积分的，不知道为什么总是会被强行修改成需要积分，可以直接进文章查看并复制代码，觉得有用的点个赞就行了不用消耗积分。文章链接：https://blog.csdn.net/weixin_42618289/article/details/80955578

CSS3响应式表格布局代码，响应式设计，自适应分辨率，兼容PC端和移动端，CSS3制作响应式表格布局实例。

Swiper是开源、免费、强大的移动端触摸滑动插件，能够实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果，通过本课程可以快速掌握Swiper插件的使用，并通过综合案例讲解在实际工作中的应用。通过多个案例逐一...

react-swipeable-tab 一个可滑动切换，异步加载数据，具有流畅滚动特性的 React-Tab 组件参考了提供的组件，在此基础上进行了功能特性的丰富使用 install npm i react-swipeable-tab --save import import { Tab, Tabs, TabList, PanelList, Panel, AsyncPanel } from "react-swipeable-tab"; Simple Tab 一个简单用法的 tab import React, { Component } from "react"; import { Tab, Tabs, TabList, Panel, PanelList } from "react-swipeable-tab"; export default class Demo extends Com

前言亲人工作考试，公司给的题库好像是直接从数据库导出的表格Excel形式，在移动端上非常难看，需要不断左右上下滑动，看不了多少题眼就瞎了，遂主动请缨编写python脚本解决之。原本给的题库在手机上横屏显示是这样的↓↓↓（想象一下是在手机上）无比恶心我的工作公司给出的格式是.xlsx的（Excel表格的默认格式），盲猜是直接从答题数据库导出的，表名和属性名应该是稍微做了从英文到中文的改变，然后，就直接这样发给员工了… 表格有八个，放在一个文件夹下，由于不同工种的题表头是相同的，因此可以编写代码统一处理。首先是获取题库存放路径，便于对指定路径文件处理： to_path = r'D

87,839

社区成员

224,615

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章