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

news/2024/9/24 3:15:41/

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

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

目录

  • table表格,让thead固定,tbody内容滚动,关键是都对齐的纯html" title=css>css写法,此方法的对齐关键是去掉了tbody内容的滚动条
  • 📚一、效果
  • 📚二、信息
    • 💡1.核心代码:
  • 📚三、源代码,上代码,可以直接复制使用


📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋1️⃣2️⃣3️⃣

html" title=css>csstbody_9">table表格,让thead固定,tbody内容滚动,关键是都对齐的纯html" title=css>css写法,此方法的对齐关键是去掉了tbody内容的滚动条

📚一、效果

描述


📚二、信息

💡1.核心代码:

html" title=css>css">  <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_50">✍️html

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/html" title=css>css/bootstrap.html" title=css>css"><title>table的表头thead不动tbody内容滚动且表格对齐</title><style>html" title=css>css">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="html" title=css>css language-html" title=css>css">height: 800px;background:#7594e5;">这是配角填充内容用的</div>
</body>
</html>

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕


整理不易,点赞关注宝码香车

更多专栏订阅推荐:
👍 html+html" title=css>css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作


http://www.ppmy.cn/news/1529618.html

相关文章

果蔬识别系统架构+流程图

相关文章和代码 果蔬识别系统 果蔬识别系统优化&#xff08;1~5&#xff09; 架构图 流程图 初始化 识别流程 学习流程 同步流程 与初始化类似&#xff0c;只是同步只同步一个storeCode数据 删除数据流程 导入数据

PlantUML的使用以及各种图表示例

文章目录 1.介绍2.支持的 UML 图表3.支持的非 UML 图表4.其他功能5. 使用docker部署使用6. 几种puml示例6.1 APP登录6.2 扫码登录6.3 电商重复支付6.4 项目甘特图 1.介绍 PlantUML是一个通用性很强的工具&#xff0c;可以快速、直接地创建各种图表。利用简单直观的语言&#x…

C++ std::find函数 容器元素查找

简介 std::find函数是C标准库内非常实用的一个函数&#xff0c;主要用于在给定范围内查找某个元素&#xff0c;如果找到该元素&#xff0c;则返回指向该元素的迭代器&#xff1b;如果没有找到&#xff0c;则返回指向范围末尾的迭代器&#xff08;即 end() &#xff09;。 fin…

react hooks--useLayoutEffect

概述 ◼ useLayoutEffect看起来和useEffect非常的相似&#xff0c;事实上他们也只有一点区别而已&#xff1a;  useEffect会在渲染的内容更新到DOM上后执行&#xff0c;不会阻塞DOM的更新&#xff1b;  useLayoutEffect会在渲染的内容更新到DOM上之前执行&#xff0c;会…

数据结构与算法-Trie树添加与搜索

trie树的使用场景 我们若需要制作一个通讯录的软件&#xff0c;使用常规树结构查询的复杂度为O(logn),但trie树的复杂度确与数据多少无关&#xff0c;与单词长度有关&#xff0c;这就大大缩减的查询的时间复杂度。 trie树的基本实现 基础结构 package com.study.trieDemo;i…

某恩加密数据爬虫逆向分析

目标网站 aHR0cHM6Ly93d3cuZW5kYXRhLmNvbS5jbi9pbmRleC5odG1s 一、抓包分析 响应数据加密 二、逆向分析 下断点&#xff0c;刷新页面 一直往下跟栈&#xff0c;发现是在这进行的加密 内部实现逻辑 本地数据获取 本文章仅提供技术分享交流学习&#xff0c;不可对目标服务器造…

【洛谷】AT_abc371_e [ABC371E] I Hate Sigma Problems 的题解

【洛谷】AT_abc371_e [ABC371E] I Hate Sigma Problems 的题解 洛谷传送门 AT传送门 题解 I Hate Sigma Problems!!! 意思很简单就是求序列中每一个子区间内含有不同数字的个数之和。 暴力的话时间复杂度是 O ( n 2 ) O(n ^ 2) O(n2)&#xff0c;是肯定不行的&#xff0…

DSP学习00-F28379D学习准备(了解一个工程的构成)

叠甲 我也算初学F28379D&#xff0c;不对之处请大家斧正。不同型号的DSP在外设配置的函数上有一些区别&#xff0c;但是掌握一种对其他型号的来说则难度不大。对于我们而言学习DSP最终还是要用于算法验证&#xff0c;而DSP资源的最大化利用、代码效率提升等则是后话。 软件准…