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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/146004.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

编程实践｜用 MoonBit 实现线段树(一)

编程实践｜用 MoonBit 实现线段树(一)

引言 线段树(Segment Tree)是一种常见的数据结构&#xff0c;用于解决一些线性区间的修改、查询问题&#xff0c;比如对于问题&#xff1a; 给出一个长度已知的、有初值的数字数组&#xff0c;接下来要进行许多区间加法操作&#xff08;将一个区间的数值都加上某个值&#xf…
阅读更多...
线性dp 总结详解

线性dp 总结详解

就是感觉之前 dp 的 blog 太乱了整理一下。 LIS(最长上升子序列) 例题 给定一个整数序列&#xff0c;找到它的所有严格递增子序列中最长的序列&#xff0c;输出其长度。 思路 拿到题目&#xff0c;大家第一时间想到的应该是的暴力(dp)做法&#xff1a; #include <bits/s…
阅读更多...
锐尔15注册机 锐尔文档扫描影像处理系统15功能介绍

锐尔15注册机 锐尔文档扫描影像处理系统15功能介绍

锐尔文档扫描影像处理系统是一款全中文操作界面的文件、档案扫描及影像优化处理软件&#xff0c;是目前国内档案数字化行业里专业且优秀的影像优化处理软件。 无论是从纸质文件制作高质量的影像文件&#xff0c;或是检查已经制作好的影像文件&#xff0c;锐尔文档扫描影像处理…
阅读更多...
LangChain 和 Elasticsearch 加速构建 AI 检索代理

LangChain 和 Elasticsearch 加速构建 AI 检索代理

作者&#xff1a;来自 Elastic Joe McElroy, Aditya Tripathi, Serena Chou Elastic 和 LangChain 很高兴地宣布发布新的 LangGraph 检索代理模板&#xff0c;旨在简化需要代理使用 Elasticsearch 进行代理检索的生成式人工智能 (GenAI) 代理应用程序的开发。此模板预先配置为使…
阅读更多...
C++第十一节课 new和delete

C++第十一节课 new和delete

一、new和delete操作自定义类型 new/delete 和 malloc/free最大区别是 new/delete对于【自定义类型】除了开空间还会调用构造函数和析构函数&#xff08;new会自动调用构造函数&#xff1b;delete会调用析构函数&#xff09; class A { public:A(int a 0): _a(a){cout <&l…
阅读更多...
使用express或koa或nginx部署history路由模式的单页面应用

使用express或koa或nginx部署history路由模式的单页面应用

使用hash模式会有#&#xff0c;影响美观&#xff0c;所以使用history模式会是个更好的选择。 前端项目打包上线部署&#xff0c;可以使用下面的方式部署history模式的项目&#xff0c;下面以 jyH5 为例 expressjs部署 express脚手架搭建的app.js中添加如下代码&#xff1a; …
阅读更多...
Superset二次开发之优化Mixed Chart 混合图(柱状图+折线)

Superset二次开发之优化Mixed Chart 混合图(柱状图+折线)

背景 基于Mixed Chart（柱状图+折线）作图，显示 某维度A Top10 + 其他 数据，接口返回了值为 undefined 的某维度A 数据，前端渲染成 某维度A 值为 0 此图表存在的问题： 图表控件编辑页面，即便数据集正常查询出 Top10 + ‘其他’ 数据，但是堆积图表渲染时，返回了 值为 0…
阅读更多...
【网络通信基础与实践第四讲】用户数据报协议UDP和传输控制协议TCP

【网络通信基础与实践第四讲】用户数据报协议UDP和传输控制协议TCP

一、UDP的主要特点 1、UDP是无连接的&#xff0c;减少了开销和发送数据之前的时延 2、UDP使用尽最大努力交付&#xff0c;但是不保证可靠交付 3、UDP是面向报文的。从应用层到运输层再到IP层都只是添加一个相应的首部即可 4、UDP没有拥塞机制&#xff0c;源主机以恒定的速率…
阅读更多...
Zookeeper安装使用教程

Zookeeper安装使用教程

# 安装 官网下载安装包 #配置文件 端口默认8080&#xff0c;可能需要更改一下 #启动 cd /Users/lisongsong/software/apache-zookeeper-3.7.2-bin/bin ./zkServer.sh start #查看运行状态 ./zkServer.sh status #停止 ./zkServer.sh stop #启动客户端 ./zkCli.sh ls /
阅读更多...
Linux ubuntu debian系统安装UFW防火墙图形化工具GUFW

Linux ubuntu debian系统安装UFW防火墙图形化工具GUFW

GUFW是UFW的图形化前端&#xff0c;可以通过以下命令安装&#xff1a; sudo apt install gufw安装成功后&#xff0c;可以通过应用程序菜单启动GUFW&#xff0c;在图形界面中&#xff0c;可以方便地添加、修改和删除规则&#xff0c;查看状态和日志。
阅读更多...
java之杨辉三角问题

java之杨辉三角问题

给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 如何实现呢&#xff1f; 思路&#xff1a;首先&#xff0c;我们可以将杨辉三角视作i行j列的二维数组。除了第一行和第二行之外&am…
阅读更多...
IPD流程体系：IPD在硬件产品开发中的应用

IPD流程体系：IPD在硬件产品开发中的应用

目录 1、内容简介 2、开发各阶段介绍 3、PVT阶段 4、资源群更新 作者简介 1、内容简介 在硬件类相关产品的开发过程中&#xff0c; 每个阶段的工作都是需要按照一定的流程、规范和标准去进行的。 整体还是相对瀑布化的流程&#xff0c; 每个阶段的输入、输出、准入、准…
阅读更多...
C++初阶学习——探索STL奥秘——反向迭代器

C++初阶学习——探索STL奥秘——反向迭代器

适配器模式是 STL 中的重要组成部分&#xff0c;除了容器适配器外&#xff0c;还有 选代器适配器&#xff0c;借助 选代器适配器 &#xff0c;可以轻松将各种容器中的普通迭代器转变为反向迭代器&#xff0c;这正是适配器的核心思想 注:库中的反向迭代器在设计时&#xff0c;为…
阅读更多...
【HTTP】请求“报头”（Host、Content-Length/Content-Type、User-Agent（简称 UA））

【HTTP】请求“报头”（Host、Content-Length/Content-Type、User-Agent（简称 UA））

Host 表示服务器主机的地址和端口号 URL 里面不是已经有 Host 了吗&#xff0c;为什么还要写一次&#xff1f; 这里的 Host 和 URL 中的 IP 地址、端口什么的&#xff0c;绝大部分情况下是一样的&#xff0c;少数情况下可能不同当前我们经过某个代理进行转发。过程中&#xf…
阅读更多...
С++第十三节课 string初体验

С++第十三节课 string初体验

一、string类的相关函数 string实际上也就是一个管理字符的顺序表&#xff01; 如果我们需要遍历一个字符串&#xff0c;怎么实现&#xff1f; 我们可以通过下标访问操作符 size实现字符串的遍历&#xff01; int main() {string s1("hello world");// 遍历一个字…
阅读更多...
不可思议的效率飞跃：RPA如何重塑你的工作流程，释放人力潜能！

不可思议的效率飞跃：RPA如何重塑你的工作流程，释放人力潜能！

RPA简介 机器人流程自动化&#xff08;Robotic Process Automation&#xff0c;简称RPA&#xff09;是一种模拟人类用户操作的软件技术&#xff0c;它通过自动化执行重复性、规律性强的任务来提高工作效率和准确性。RPA软件机器人可以模拟鼠标点击、键盘输入、数据复制粘贴等操…
阅读更多...
anaconda的windows新手安装及配置教程（适用于物联网工程、计算机专业）

anaconda的windows新手安装及配置教程（适用于物联网工程、计算机专业）

第一步：点击免费下载 点击我直达anaconda官网">——>点击我直达anaconda官网 第二步：跳过注册 第三步：下载windows版本 第四步：安装步骤 1.Next （下一步） 2.I Agree （我同意） 3.默认即可，下一步 4.安装地址可以选到D盘，如果没有默认也行，只是一个…
阅读更多...
OpenAI GPT o1技术报告阅读（4）- 填字游戏推理

OpenAI GPT o1技术报告阅读（4）- 填字游戏推理

✨继续阅读报告&#xff1a;使用大模型来学习推理(Reason) 原文链接&#xff1a;https://openai.com/index/learning-to-reason-with-llms/ 这次我们继续看一个填字游戏的案例。 我们先看下问题&#xff1a; 解决以下填字游戏&#xff1a; Across&#xff08;横向&#xff09…
阅读更多...
推荐2024年好用的4款日语翻译工具

推荐2024年好用的4款日语翻译工具

日语在学习研究&#xff0c;商务合作&#xff0c;旅游文化交流等多个领域还是占有着一个比较重要的作用&#xff0c;将中日两种语言进行准确地翻译能够这些活动更加高效有益地进行和发展。因此好的翻译工具便尤为重要&#xff0c;今天我也给大家挑选了几款优秀地日语翻译工具。…
阅读更多...
可视化工具箱-Visualization Toolkit（VTK）

可视化工具箱-Visualization Toolkit（VTK）

一、Visualization Toolkit&#xff08;VTK&#xff09;简概 可视化工具箱&#xff08;VTK&#xff09;&#xff0c;是一个用于3D计算机图形、图像处理和科学可视化的开源软件系统&#xff0c;其包含C类库和Tcl/Tk、Java与python的解释型接口层。VTK支持各种可视化算法&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023