纯 html、css代码写的 table 表格
先来看下pc端的效果图
移动端的效果图，前面两张是静态图，第三张是gif动态图 （像素失真了 •︿• ）
公司的移动端项目，用的是react，页面需求是做一个表格展示数据，但看了antd-mobile、react-vant 组件库都没有找到 table 组件，百度找到的插件也少 所以用原生html、css写一个。移动端复制即可使用，pc端还是用element-ui、ant Design等等这些开源的组件库做表格比较好，内容丰富，功能比较全面
这里贴一下html、css代码 模拟数据可以替换为你后台请求到的数据
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /><title>可滚动的数据表格</title><style>/* 设置最外层容器可以左右滚动*/.scroll_table {overflow-x: scroll;overflow-y: hidden;position: relative;width: 100%;height: 530px;font-size: 13px;}table {border: 1px solid #eee;}/* 调节表头宽度 */table thead {background-color: #f5f5f5;width: calc(100%);}table thead tr th {background: skyblue;}/* 固定表头 */table thead,tbody tr {display: table;width: 100%;table-layout: fixed;}/* 控制表格滑动 */table tbody {display: block;height: 450px;overflow-y: scroll;}/* 隐藏 y轴的滚动条，仍然可以上下滚动 */table tbody::-webkit-scrollbar {display: none;}th,td {white-space: nowrap;width: 130px;height: 50px;text-align: center;overflow: hidden;border: 1px solid #f5f5f5;border-width: thin;}td img {margin: auto 0;width: 40px;height: 40px;border-radius: 50%;overflow: hidden;background-color: #eee;}</style></head><body><div class="scroll_table"><table><thead><tr><th>ID</th><th>头像</th><th>昵称</th><th>手机号码</th><th>注册时间</th><th>邀请人</th><th>所属平台</th><th>身份类型</th><th>订单数量</th><th>当前积分</th><th>当前余额</th><th>是否邀请好友</th><th>登录时间</th></tr></thead><tbody><tr><td>18</td><td> <img /> </td><td>丁一</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>小二</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>张三</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>李四</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>王五</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>赵六</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>孙七</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>周八</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>吴九</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>郑十</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>丁一</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>小二</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>张三</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>李四</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>王五</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>赵六</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>孙七</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>周八</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>吴九</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>郑十</td><td>13485745987</td><td>-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>-01-13</td></tr></tbody></table></div></body></html>
