使用 CSS Grid 实现 tbody 自适应剩余高度的表格布局

聖光之護

发布时间：2026-02-15 10:21:31

342人浏览过

来源于php中文网

原创

使用 CSS Grid 实现 tbody 自适应剩余高度的表格布局

本文介绍如何通过将元素设为 CSS Grid 容器，并利用 grid-template-rows: auto 1fr，让自动占据父容器中扣除（及其它表头相关高度）后的全部剩余空间，无需手动计算像素值或依赖 JavaScript。

本文介绍如何通过将 `

` 元素设为 css grid 容器，并利用 `grid-template-rows: auto 1fr`，让 `` 自动占据父容器中扣除 ``（及其它表头相关高度）后的全部剩余空间，无需手动计算像素值或依赖 javascript。

在构建数据密集型表格（如员工信息列表）时，常需固定表头、滚动表格主体，同时确保

高度能自适应视口或容器剩余空间。传统做法往往借助 JavaScript 动态计算 header + padding + border 等高度后赋值给 tbody，不仅冗余，还易受样式变更影响，维护成本高。

现代、简洁且可靠的解法是：将

元素声明为 CSS Grid 容器，并定义两行布局——第一行（对应 ）高度由内容决定（auto），第二行（对应 ）则弹性占满剩余空间（1fr）。
关键 CSS 修改如下：
.tableFixHead { overflow: auto; height: 80vh; /* 可根据实际需求调整，如 100vh 或具体 px 值 */ } /* 核心改造：启用 Grid 布局并定义行轨道 */ table { display: grid; grid-template-rows: auto 1fr; /* 第一行自适应，第二行占满剩余空间 */ border-collapse: collapse; width: 100%; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } th, td { padding: 8px 16px; } th { background: #eee; }
⚠️ 重要注意事项：

科威旅游管理系统
该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

下载

立即学习“前端免费学习笔记（深入）”；

和 必须作为

的直接子元素，Grid 布局才能正确识别其语义结构并分配行轨道；
不要对
或设置 display: block 等覆盖默认显示模式的规则，否则会破坏 Grid 子项的渲染逻辑；
若表格含
，需同步扩展 grid-template-rows（如 auto 1fr auto），并确保 DOM 顺序与 Grid 行序一致；
sticky 定位依赖父容器具有明确的高度（即 .tableFixHead 的 height 不可为 auto），因此 height: 80vh 等显式设置必不可少；

此方案兼容所有现代浏览器（Chrome 66+、Firefox 63+、Safari 14.1+、Edge 79+），无需 polyfill。

该方法完全脱离“减法思维”（即 calc(100% - Xpx)），转而采用声明式布局逻辑，既提升代码可读性与健壮性，也契合 CSS 的响应式设计哲学。对于需长期维护的数据表格组件，推荐将其封装为可复用的类名（如 .table-auto-body），统一应用此 Grid 模式。

在 Google Charts 上叠加可动态更新的自定义文本（居中/任意位置）

html5如何制作二级横向导航菜单

在 Google Chart 上叠加可动态更新的自定义文本（居中显示或任意定位）

后加的表格如何与原表格形式一致html

如何在html页面跳转过程中使用加载动画

相关标签:

css firefox chrome safari edge 封装 auto dom display padding border table tbody

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML 字符串安全截断：精准控制可见字符数并保留标签完整性下一篇：如何通过 AJAX 将前端图像数组（File 对象）正确提交至后端控制器

作者最新文章

如何使用 Byte Buddy 在 Java Agent 中动态修改类的父类

2026-02-14 09:51

如何在 Go 语言中将带时分秒的日期字符串转换为 Unix 时间戳（秒级）

2026-02-14 09:51

OpenCV Python 中精准检测图像直线的完整教程

2026-02-14 10:11

如何让锚点内的子元素（如按钮）脱离链接交互

2026-02-14 10:22

实现可重复拖拽的 JavaScript 拖放模板（不移除源元素）

2026-02-14 10:29

如何安全访问 React 中异步获取的嵌套 API 数据

2026-02-14 10:30

如何在 React 中实现卡片高度的动态自适应对齐

2026-02-14 10:35

jQuery 与 Go 后端交互时如何正确设置 JSON 请求头

2026-02-14 10:35

使用 NumPy 基于一维索引数组从两个同形 3D 数组中条件选择元素

2026-02-14 10:46

NumPy 中基于一维索引数组从两个三维数组中条件选择元素的正确方法

2026-02-14 10:47

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

AI 图片处理图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

chrome什么意思

chrome是浏览器的意思，由Google开发的网络浏览器，它在2008年首次发布，并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容，供大家免费下载体验。

944

2023.08.11

chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

779

2023.11.06

edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器，是Windows 10操作系统中默认的浏览器，其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容，供大家免费下载体验。

1561

2023.08.21

IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法：1、更改默认浏览器设置；2、阻止edge浏览器的自动跳转；3、更改超链接的默认打开方式；4、禁用“快速网页查看器”；5、卸载edge浏览器；6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

390

2024.03.05

如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题（窗口空白或标题栏缺失），可尝试以下方法解决：重启 Edge：关闭所有窗口，重新启动浏览器。重置窗口布局：右击任务栏 Edge 图标 → 选择「最大化」或「还原」。禁用扩展：进入 edge://extensions 临时关闭插件测试。重置浏览器设置：前往 edge://settings/reset 恢复默认配置。更新或重装 Edge：检查最新版本，或通过控制面板修复

982

2025.04.24