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.rhkb.cn/news/427804.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Postman如何测试WebSocket接口！

Postman如何测试WebSocket接口！

01、WebSocket 简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议。 WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直…
阅读更多...
【Linux 20】线程控制

【Linux 20】线程控制

文章目录 &#x1f308; 一、创建线程⭐ 1. 线程创建函数⭐ 2. 创建单线程⭐ 3. 给线程传参⭐ 4. 创建多线程⭐ 5. 获取线程 ID &#x1f308; 二、终止线程⭐1. 使用 return 终止线程⭐ 2. 使用 pthread_exit 函数终止线程⭐ 3. 使用 pthread_cancel 函数终止线程 &#x1f30…
阅读更多...
HTTP协议详解以及常见的状态码

HTTP协议详解以及常见的状态码

HTTP协议的定义&#xff1a; HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是一种建立在TCP&#xff08;传输控制协议&#xff09;之上的无状态连接协议。它是互联网的基础协议之一&#xff0c;用于客户端与服务器之间的通信。HTTP规定…
阅读更多...
【Python】练习：控制语句（二）第1关

【Python】练习：控制语句（二）第1关

第1关&#xff1a;分支结构基础实训 第一题第二题第三题第四题&#xff08;※&#xff09;第五题&#xff08;※&#xff09;第六题第七题 第一题 #第一题 for temp in [-280, -100, 0, 20, 120, 200]:#请在下面编写代码# ********** Begin ********** #if temp>-273.15:F9/…
阅读更多...
如何选择适合客户运营团队的帮助中心搭建工具？8款工具盘点

如何选择适合客户运营团队的帮助中心搭建工具？8款工具盘点

在竞争激烈的商业环境中&#xff0c;客户运营团队需要高效、便捷的工具来搭建帮助中心&#xff0c;以提升客户服务质量和用户体验。选择合适的帮助中心搭建工具&#xff0c;不仅能提高团队工作效率&#xff0c;还能增强客户满意度和忠诚度。本文将为您盘点八款适合客户运营团队…
阅读更多...
中间件安全（二）

中间件安全（二）

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言: 前文链接&#xff1a;中间件安全&#xff08;一&#xff09; 本文主要讲解Couchdb数据库未授权越权漏洞&#xff08;CVE-2017-12635&#xff09;。 靶场链接&#xff1a;Vu…
阅读更多...
爱普生相机SD卡格式化后数据恢复指南

爱普生相机SD卡格式化后数据恢复指南

我借了朋友的‌爱普生相机&#xff0c;想查看一下内存&#xff0c;哎呀&#xff0c;一不小心按错了&#xff0c;竟然执行了格式化操作&#xff0c;这可真是太让人郁闷了&#xff0c;这还有机会挽救数据吗&#xff1f;心塞&#xff0c;求帮助&#xff01; 随着数码摄影的普及&am…
阅读更多...
java框架

java框架

Oozie任务调度框架 Hue hadoop的WEB工具 seatunnel 数据同步框架 TIDB 大数据库支持事物 StreamX fink和spark的集成 OceanBase 阿里巴巴数据库 dooringx-lib、AntV 可视化H5工具 lowcode、Appsmith&#xff08;推荐&#xff09;、nocoBase 、Budibase、taskbuilder 低代…
阅读更多...
【最经典的79个】软件测试面试题（内含答案）

【最经典的79个】软件测试面试题（内含答案）

001.软件的生命周期(prdctrm) 计划阶段(planning)-〉需求分析(requirement)-〉设计阶段(design)-〉编码(coding)->测试(testing)->运行与维护(running maintrnacne) 测试用例 用例编号 测试项目 测试标题 重要级别 预置条件 输入数据 执行步骤 预期结果 0002.问&…
阅读更多...
Linux基础权限

Linux基础权限

Linux基础权限 shell的概念Linux基础权限Linux的两种用户Linux的权限管理权限认知权限设置权限掩码粘滞位 shell的概念 &#xff08;shell&#xff09;命令行解释器 的存在意义&#xff1a; 将用户的命令翻译给操作系统&#xff0c;然后返回OS的结果给用户&#xff1b;保护OS…
阅读更多...
visionpro脚本

visionpro脚本

visionproToolBlock的脚本的优先级优于工具连线的优先级&#xff0c;一般是照着脚本的执行顺序进行执行对应的工具&#xff0c;最常用的是C#的高级脚本&#xff0c;C#的脚本如下分为5部分。 第一部分&#xff1a;主要是一些库的引用&#xff0c;对于有些类型不知道库的时候&…
阅读更多...
云服务器开放端口

云服务器开放端口

1. 控制台开放安全组 例如 阿里云 https://ecs.console.aliyun.com/ 网络与安全 > 安全组 新建或者选择一个安全组 入方向 > 手动添加 2. 服务器防火墙放行端口 在 CentOS 7 中可以使用 firewall-cmd 命令来开放指定端口号 16622。以下是具体步骤&#xff1a; 一、…
阅读更多...
python库tenacity最后一次重试忽略异常，并返回None

python库tenacity最后一次重试忽略异常，并返回None

from tenacity import retry, stop_after_attemptretry(stopstop_after_attempt(3), retry_error_callbacklambda x:None) def my_function():print(retry...)print(1/0)result my_function() print(result)效果如下
阅读更多...
centos 7.9安装k8s

centos 7.9安装k8s

前言 Kubernetes单词来自于希腊语&#xff0c;含义是领航员&#xff0c;生产环境级别的容器编排技术&#xff0c;可实现容器的自动部署扩容以及管理。Kubernetes也称为K8S&#xff0c;其中8代表中间8个字符&#xff0c;是Google在2014年的开源的一个容器编排引擎技术&#xff…
阅读更多...
Linux基础---07文件传输及解决yum安装失效的方法

Linux基础---07文件传输及解决yum安装失效的方法

Linux文件传输地图如下&#xff0c;先选取你所需的场景&#xff0c;若你是需要Linux和Linux之间传输文件就查看SCP工具即可。 一.下载网站文件 前提是有网&#xff1a; 检查网络是否畅通命令&#xff1a;ping www.baidu.com&#xff0c;若有持续的返回值就说明网络畅通。Ctr…
阅读更多...
Docker笔记-容器数据卷

Docker笔记-容器数据卷

Docker笔记-容器数据卷 docker的理念将运行的环境打包形成容器运行&#xff0c;运行可以伴随容器&#xff0c;但是我们对数据的要求是希望持久化&#xff0c;容器 之间可以共享数据&#xff0c;Docker容器产生的数据&#xff0c;如果不通过docker commit生成新的镜像&#xf…
阅读更多...
发送成绩的app或小程序推荐

发送成绩的app或小程序推荐

老师们&#xff0c;新学期的第一次月考马上开始&#xff0c;是不是还在为如何高效、便捷地发布成绩而头疼呢&#xff1f;别担心&#xff0c;都2024年了&#xff0c;我们有更智能的方式来解决这个问题&#xff01; 给大家安利一个超级实用的工具——易查分小程序。这个小程序简…
阅读更多...
【Unity踩坑】UI Image的fillAmount不起作用

【Unity踩坑】UI Image的fillAmount不起作用

在游戏场景中&#xff0c;我们经常在界面上展示进度条&#xff0c;当然有各种形状的&#xff0c;线性的&#xff0c;长方形的&#xff0c;圆形&#xff0c;环形等等。 Unity中实现这种效果的话&#xff0c;最基本的方法说是改变Image的fillAmout属性。 如果你是初次使用UI Ima…
阅读更多...
基于STM32的温度、电流、电压检测proteus仿真系统（OLED、DHT11、继电器、电机）

基于STM32的温度、电流、电压检测proteus仿真系统（OLED、DHT11、继电器、电机）

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STM32F103C8T6 采用DHT11读取温度、滑动变阻器模拟读取电流、电压。 通过OLED屏幕显示，设置电流阈值为80，电流小阈值为50，电压阈值为60，温度阈值为30 随便哪个超过预祝，则继电器切断，LE…
阅读更多...
块匹配算法简介（上）

块匹配算法简介（上）

图像中的运动估计方法大致分为两类：光流法和块匹配算法（BMA，Block Matching Algorithm）。本文将介绍BMA的相关内容，包括基本原理、相似度计算准则与常见的几种搜索方法，如三步法、四步法、钻石搜索法等。 1. 背景 视频中相邻帧往往存在大量的相似内容，即只有局部的一些…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023