欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 焦点 > table表格,让thead固定,tbody内容滚动,关键是都对齐的纯css写法

table表格,让thead固定,tbody内容滚动,关键是都对齐的纯css写法

2024/11/18 4:04:56 来源:https://blog.csdn.net/qq_33650655/article/details/142388007  浏览:    关键词:table表格,让thead固定,tbody内容滚动,关键是都对齐的纯css写法

前言:哈喽,大家好,今天给大家分享今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕

共同探索软件研发!敬请关注【宝码香车】
csdngif标识

目录

  • 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())操作

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com