html ＜table＞ 表格 表头固定 内容滚动 代码拿去就能用
2024-06-04 05:23:05
纯 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>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>小二</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>张三</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>李四</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>王五</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>赵六</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>孙七</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>周八</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>吴九</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>郑十</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>丁一</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>小二</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>张三</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>李四</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>王五</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>赵六</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>孙七</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>周八</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>吴九</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr><tr><td>18</td><td> <img /> </td><td>郑十</td><td>13485745987</td><td>2022-01-13</td><td>暗里着迷</td><td>腾讯游戏</td><td>用户</td><td>52</td><td>753</td><td>0</td><td>否</td><td>2022-01-13</td></tr></tbody></table></div></body>
</html>
html ＜table＞ 表格 表头固定 内容滚动 代码拿去就能用相关推荐
- div+css实现表头固定内容滚动表格
<div class="m-demo"><table><thead><tr><th>定宽a</th>< ...
- html表头跟随滚动,table的表头固定--上下滚动表头固定，左右滚动跟随滚动
遇到这种固定表格的,我们一般都是写两个table,一个放thead,一个放tbody: 如果表格内容少,我们只需要给两个table100%宽度就行,如果遇到表格内容很长的就比较棘手了: 1.上面的ta ...
- java 表头固定_BootStrap的table表头固定tbody滚动的实例代码
关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: 栏目一栏目二栏目三栏目一栏目二栏目三 星期一星期二星期三星期一星期二星期三星期一星期二 星期二 星期三星期一 ...
- 完美解决html表格表头固定存在的问题
完美解决html表格表头固定存在的问题 当表格数据较多出现滚动条时,很多地方都有固定表头的需求.在网上查找资料,发现了一个比较简洁的方法. 代码如下: 1.css样式: th{backgroun ...
- css方法实现表格表头固定，横向纵向可滑动
介绍一种用css实现表格表头固定,横向纵向可滑动的方法 先用一个div把表格包起来,表格给定高宽,overflow:scroll. 然后给表头写一个黏性布局 position: sticky:top: ...
- Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示 需求 鼠标移入表头 关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
- layui table 表格模板按钮的实例代码
文章转载:https://www.jb51.net/article/170530.htm 今天小编就为大家分享一篇layui table 表格模板按钮的实例代码,具有很好的参考价值,希望对大家有所帮助 ...
- table表格固定表头，内容滚动显示
目的:做一个table表格,实现固定标题行而内容可滚动 html部分代码如下: <!DOCTYPE html> <html><head><meta chars ...
- elementUI table 表格表头居中 颜色、内容居左
设置表格表头居中 颜色 : header-cell-style="{'text-align':'center',color: '#000',}" 设置表格内容 : align=&q ...
最新文章
- c语言输入姓名比较是否同性,C语言基础--选择题
- 【jquery版.net控件—dropdownlist】附源码，欢迎大家指点、指正、拍砖！！！
- python 类的特殊成员（属性和方法）
- 速度与激情的Webpack
- linux 查看进程启动路径
- python文件输入符_python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)...
- css多重背景教程,多重背景的CSS动画
- 如何使用Movavi Screen Recorder在Mac上同时录制屏幕和音频
- cf1140E 回文串+染色方案dp
- 文件夹内失效 .htaccess_辽宁本溪内支撑盲管实业
- 虚拟机搭建Windows2003步骤详解
- 关于备考软考过程中历年真题的说明
- 打印机打印字体轻，像针式的故障处理（图）
- linux进程操作日志文件,我使用过的Linux命令之tailf - 跟踪日志文件/更好的tail -f版本...
- 蛋白定量质谱(Label-free)
- java中applet下载,Java Applet概述
- java提高_最有效提高Java的10个计划
- MySQL实战45讲——MySQL是怎么保证数据不丢的？
- QsciScintilla等编辑器实现不同区域鼠标右键处理方式不同的方法
- 【Unity3D插件】UniRx（基于Unity的响应式编程框架）插件教程