table表格，让thead固定，tbody内容滚动，关键是都对齐的纯css写法
前言：哈喽，大家好，今天给大家分享今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕
目录
- table表格，让thead固定，tbody内容滚动，关键是都对齐的纯css写法，此方法的对齐关键是去掉了tbody内容的滚动条
- 📚一、效果
- 📚二、信息
- 💡1.核心代码：
- 📚三、源代码，上代码，可以直接复制使用
- ✍️html
📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋1️⃣2️⃣3️⃣
table表格，让thead固定，tbody内容滚动，关键是都对齐的纯css写法，此方法的对齐关键是去掉了tbody内容的滚动条
📚一、效果
📚二、信息
💡1.核心代码：
<style>
thead{
background-color: darkgray;
}
/*main*/
tr {
display: table;
width: 100%;
table-layout: fixed;
}
tbody {
display: block; /*必需！若不写，height无效*/
height: 200px;
overflow: auto; /*必需！若不写，则父元素有滚动条，tbody滚动失效*/
-webkit-overflow-scrolling: touch; /*滑动顺畅*/
}
tbody::-webkit-scrollbar {
display: none; /*隐藏滚动条*/
}
</style>
📚三、源代码，上代码，可以直接复制使用
✍️html
<!doctype html>
<html lang="en">
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<title>table的表头thead不动tbody内容滚动且表格对齐</title>
<style>
thead{
background-color: darkgray;
}
/*main*/
tr {
display: table;
width: 100%;
table-layout: fixed;
}
tbody {
display: block; /*必需！若不写，height无效*/
height: 200px;
overflow: auto; /*必需！若不写，则父元素有滚动条，tbody滚动失效*/
-webkit-overflow-scrolling: touch; /*滑动顺畅*/
}
tbody::-webkit-scrollbar {
display: none; /*隐藏滚动条*/
}
</style>
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered table-striped" id="test_table">
<thead>
<tr>
<th>公司名称</th>
<th>招聘职位</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>金正大国际</td>
<td>仪表工程师</td>
<td>10-15K</td>
</tr>
<tr>
<td>邦旭科技</td>
<td>运维工程师</td>
<td>2-3K</td>
</tr>
<tr>
<td>申正机械</td>
<td>申正机械招聘焊工</td>
<td>5-9K</td>
</tr>
<tr>
<td>震悦减震</td>
<td>机械工程师</td>
<td>4-6K</td>
</tr>
<tr>
<td>山东金正阳</td>
<td>采矿工程师</td>
<td>7-10K</td>
</tr>
<tr>
<td>道依茨法尔</td>
<td>液压工程师</td>
<td>9-14K·13薪</td>
</tr>
<tr>
<td>山田新材料</td>
<td>机械工程师</td>
<td>6-11K</td>
</tr>
<tr>
<td>临沂金正阳管业</td>
<td>地质工程师</td>
<td>8-12K</td>
</tr>
<tr>
<td>瑞纳集团</td>
<td>软件运维工程师</td>
<td>4-8K</td>
</tr>
<tr>
<td>山东科翰硅源新材料</td>
<td>车间DCS系统设备工程师</td>
<td>5-8K</td>
</tr>
<tr>
<td>伯乐为亮</td>
<td>高级机械设计工程师</td>
<td>20-25K</td>
</tr>
<tr>
<td>思路智园科技</td>
<td>化工业务工程师-工艺或消防方向</td>
<td>10-15K</td>
</tr>
<tr>
<td>山东金扬教育科技</td>
<td>风电/光伏运维工程师</td>
<td>5-6K</td>
</tr>
<tr>
<td>盈盛泰</td>
<td>工程维修</td>
<td>4-6K</td>
</tr>
<tr>
<td>山东正阳工程咨询公司</td>
<td>工程造价员</td>
<td>4-8K</td>
</tr>
<tr>
<td>圣泰</td>
<td>机械工艺员</td>
<td>8-10K</td>
</tr>
<tr>
<td>启千公司</td>
<td>社保销售</td>
<td>6-10K</td>
</tr>
<tr>
<td>厚德</td>
<td>cad绘图专员</td>
<td>4-5K</td>
</tr>
<tr>
<td>临沭德艺装饰</td>
<td>建筑施工现场管理</td>
<td>5-6K</td>
</tr>
<tr>
<td>艺辰影视</td>
<td>舞美设计执行</td>
<td>80-90元/天</td>
</tr>
<tr>
<td>史丹利</td>
<td>生产管培生</td>
<td>5-8K</td>
</tr>
<tr>
<td>蒙纳德</td>
<td>蒙纳德招聘质量管理/测试</td>
<td>3-6K</td>
</tr>
<tr>
<td>四川佳能达科技发展</td>
<td>otc医药代表</td>
<td>10-11K</td>
</tr>
<tr>
<td>常林饲料</td>
<td>品牌总经理，销售主管，销售专员</td>
<td>8-9K</td>
</tr>
<tr>
<td>玛酷机器人</td>
<td>课程顾问</td>
<td>3-6K</td>
</tr>
<tr>
<td>招联咨询</td>
<td>经理助理</td>
<td>7-8K</td>
</tr>
<tr>
<td>润之升</td>
<td>临沭生产文员</td>
<td>3-4K</td>
</tr>
<tr>
<td>数字奇点</td>
<td>销售代表</td>
<td>5-10K·13薪</td>
</tr>
<tr>
<td>华辛商贸</td>
<td>医药代表</td>
<td>5-10K</td>
</tr>
<tr>
<td>临沂市硕熙医疗科...</td>
<td>医药地区经理</td>
<td>12-24K</td>
</tr>
<tr>
<td>金正大国际</td>
<td>仪表工程师</td>
<td>10-15K</td>
</tr>
<tr>
<td>邦旭科技</td>
<td>运维工程师</td>
<td>2-3K</td>
</tr>
<tr>
<td>申正机械</td>
<td>申正机械招聘焊工</td>
<td>5-9K</td>
</tr>
<tr>
<td>震悦减震</td>
<td>机械工程师</td>
<td>4-6K</td>
</tr>
<tr>
<td>山东金正阳</td>
<td>采矿工程师</td>
<td>7-10K</td>
</tr>
<tr>
<td>道依茨法尔</td>
<td>液压工程师</td>
<td>9-14K·13薪</td>
</tr>
<tr>
<td>山田新材料</td>
<td>机械工程师</td>
<td>6-11K</td>
</tr>
<tr>
<td>临沂金正阳管业</td>
<td>地质工程师</td>
<td>8-12K</td>
</tr>
<tr>
<td>瑞纳集团</td>
<td>软件运维工程师</td>
<td>4-8K</td>
</tr>
<tr>
<td>山东科翰硅源新材料</td>
<td>车间DCS系统设备工程师</td>
<td>5-8K</td>
</tr>
<tr>
<td>伯乐为亮</td>
<td>高级机械设计工程师</td>
<td>20-25K</td>
</tr>
<tr>
<td>思路智园科技</td>
<td>化工业务工程师-工艺或消防方向</td>
<td>10-15K</td>
</tr>
<tr>
<td>山东金扬教育科技</td>
<td>风电/光伏运维工程师</td>
<td>5-6K</td>
</tr>
<tr>
<td>盈盛泰</td>
<td>工程维修</td>
<td>4-6K</td>
</tr>
<tr>
<td>山东正阳工程咨询公司</td>
<td>工程造价员</td>
<td>4-8K</td>
</tr>
<tr>
<td>圣泰</td>
<td>机械工艺员</td>
<td>8-10K</td>
</tr>
<tr>
<td>启千公司</td>
<td>社保销售</td>
<td>6-10K</td>
</tr>
<tr>
<td>厚德</td>
<td>cad绘图专员</td>
<td>4-5K</td>
</tr>
<tr>
<td>临沭德艺装饰</td>
<td>建筑施工现场管理</td>
<td>5-6K</td>
</tr>
<tr>
<td>艺辰影视</td>
<td>舞美设计执行</td>
<td>80-90元/天</td>
</tr>
<tr>
<td>史丹利</td>
<td>生产管培生</td>
<td>5-8K</td>
</tr>
<tr>
<td>蒙纳德</td>
<td>蒙纳德招聘质量管理/测试</td>
<td>3-6K</td>
</tr>
<tr>
<td>四川佳能达科技发展</td>
<td>otc医药代表</td>
<td>10-11K</td>
</tr>
<tr>
<td>常林饲料</td>
<td>品牌总经理，销售主管，销售专员</td>
<td>8-9K</td>
</tr>
<tr>
<td>玛酷机器人</td>
<td>课程顾问</td>
<td>3-6K</td>
</tr>
<tr>
<td>招联咨询</td>
<td>经理助理</td>
<td>7-8K</td>
</tr>
<tr>
<td>润之升</td>
<td>临沭生产文员</td>
<td>3-4K</td>
</tr>
<tr>
<td>数字奇点</td>
<td>销售代表</td>
<td>5-10K·13薪</td>
</tr>
<tr>
<td>华辛商贸</td>
<td>医药代表</td>
<td>5-10K</td>
</tr>
<tr>
<td>临沂市硕熙医疗科...</td>
<td>医药地区经理</td>
<td>12-24K</td>
</tr>
<tr>
<td>金正大国际</td>
<td>仪表工程师</td>
<td>10-15K</td>
</tr>
<tr>
<td>邦旭科技</td>
<td>运维工程师</td>
<td>2-3K</td>
</tr>
<tr>
<td>申正机械</td>
<td>申正机械招聘焊工</td>
<td>5-9K</td>
</tr>
<tr>
<td>震悦减震</td>
<td>机械工程师</td>
<td>4-6K</td>
</tr>
<tr>
<td>山东金正阳</td>
<td>采矿工程师</td>
<td>7-10K</td>
</tr>
<tr>
<td>道依茨法尔</td>
<td>液压工程师</td>
<td>9-14K·13薪</td>
</tr>
<tr>
<td>山田新材料</td>
<td>机械工程师</td>
<td>6-11K</td>
</tr>
<tr>
<td>临沂金正阳管业</td>
<td>地质工程师</td>
<td>8-12K</td>
</tr>
<tr>
<td>瑞纳集团</td>
<td>软件运维工程师</td>
<td>4-8K</td>
</tr>
<tr>
<td>山东科翰硅源新材料</td>
<td>车间DCS系统设备工程师</td>
<td>5-8K</td>
</tr>
<tr>
<td>伯乐为亮</td>
<td>高级机械设计工程师</td>
<td>20-25K</td>
</tr>
<tr>
<td>思路智园科技</td>
<td>化工业务工程师-工艺或消防方向</td>
<td>10-15K</td>
</tr>
<tr>
<td>山东金扬教育科技</td>
<td>风电/光伏运维工程师</td>
<td>5-6K</td>
</tr>
<tr>
<td>盈盛泰</td>
<td>工程维修</td>
<td>4-6K</td>
</tr>
<tr>
<td>山东正阳工程咨询公司</td>
<td>工程造价员</td>
<td>4-8K</td>
</tr>
<tr>
<td>圣泰</td>
<td>机械工艺员</td>
<td>8-10K</td>
</tr>
<tr>
<td>启千公司</td>
<td>社保销售</td>
<td>6-10K</td>
</tr>
<tr>
<td>厚德</td>
<td>cad绘图专员</td>
<td>4-5K</td>
</tr>
<tr>
<td>临沭德艺装饰</td>
<td>建筑施工现场管理</td>
<td>5-6K</td>
</tr>
<tr>
<td>艺辰影视</td>
<td>舞美设计执行</td>
<td>80-90元/天</td>
</tr>
<tr>
<td>史丹利</td>
<td>生产管培生</td>
<td>5-8K</td>
</tr>
<tr>
<td>蒙纳德</td>
<td>蒙纳德招聘质量管理/测试</td>
<td>3-6K</td>
</tr>
<tr>
<td>四川佳能达科技发展</td>
<td>otc医药代表</td>
<td>10-11K</td>
</tr>
<tr>
<td>常林饲料</td>
<td>品牌总经理，销售主管，销售专员</td>
<td>8-9K</td>
</tr>
<tr>
<td>玛酷机器人</td>
<td>课程顾问</td>
<td>3-6K</td>
</tr>
<tr>
<td>招联咨询</td>
<td>经理助理</td>
<td>7-8K</td>
</tr>
<tr>
<td>润之升</td>
<td>临沭生产文员</td>
<td>3-4K</td>
</tr>
<tr>
<td>数字奇点</td>
<td>销售代表</td>
<td>5-10K·13薪</td>
</tr>
<tr>
<td>华辛商贸</td>
<td>医药代表</td>
<td>5-10K</td>
</tr>
<tr>
<td>临沂市硕熙医疗科...</td>
<td>医药地区经理</td>
<td>12-24K</td>
</tr>
</tbody>
</table>
</div>
<div style="height: 800px;background:#7594e5;">这是配角填充内容用的</div>
</body>
</html>
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕
更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作