纯 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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
