html＜table＞表格表头固定内容滚动代码拿去就能⽤纯 html、css代码写的 table 表格
先来看下pc端的效果图
移动端的效果图，前⾯两张是静态图，第三张是gif动态图 （像素失真了 ·︿· ）
公司的移动端项⽬，⽤的是react，页⾯需求是做⼀个表格展⽰数据，但看了 antd-mobile、react-vant 组件库都没有到 table 组件，百度到的插件也少 所以⽤原⽣html、css写⼀个。移动端复制即可使⽤，pc端还是⽤ 、 等等这些开源的组件库做表格⽐较好，内容丰富，功能⽐较全⾯
这⾥贴⼀下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%);
html滚动效果代码}
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>18</td>
<td> <img /> </td>
<td>丁⼀</td>
<td>134********</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>134********</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>134********</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>134********</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>134********</td> <td>2022-01-13</td> <td>暗⾥着迷</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>134********</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>134********</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>134********</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>134********</td> <td>2022-01-13</td> <td>暗⾥着迷</td>
<td>腾讯游戏</td>
<td>⽤户</td>
<td>52</td>
<td>753</td>
<td>0</td>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论