使用table-layout: fixed确保列宽由设定值决定；2. 设置width: 100%定义表格总宽度；3. 结合百分比与fr单位分配列宽，如width: 20%和width: 1fr；4. 添加word-break: break-all防止内容溢出；5. 响应式场景可采用overflow-x: auto或媒体查询实现堆叠布局；6. fr单位不兼容旧浏览器时可用calc()、flexbox或grid布局替代；该方案通过固定布局与弹性单位结合，实现表格列宽的精确控制与自适应，且在现代浏览器中表现良好，最终形成稳定、响应式的表格布局。
CSS固定表格列宽百分比，同时利用
fr
单位实现自适应布局，核心在于结合
table-layout: fixed
和
fr
单位的特性。前者确保表格宽度固定，后者让列在剩余空间中自适应。
解决方案：
设置表格布局为固定：
table-layout: fixed;
这一属性至关重要，它告诉浏览器，表格的列宽由表格的宽度和
width
属性决定，而不是内容。定义表格宽度：
width: 100%;
或其他具体数值，决定表格整体宽度。使用
fr
单位分配列宽： 在
或
元素上使用
width: 1fr;、
width: 2fr;等，
fr代表剩余空间比例。可以结合百分比和
fr： 例如，某些列固定宽度（百分比或像素），剩余列使用
fr分配。
table { width: 100%; table-layout: fixed; /* 关键！ */}th,td { word-break: break-all; /* 防止内容溢出 */}.col-1 { width: 20%; /* 百分比固定宽度 */}.col-2 { width: 1fr; /* 剩余空间自适应 */}.col-3 { width: 2fr; /* 剩余空间的2倍 */}HTML结构：
立即学习“前端免费学习笔记（深入）”；
固定宽度 自适应列1 自适应列2 内容1 内容2 内容很长内容很长内容很长内容很长 内容3 内容很长内容很长内容很长内容很长内容很长内容很长 内容4 内容5 内容6 word-break: break-all;可以防止内容过长导致列宽超出预期。
百分比列宽和
fr列宽混用时，浏览器会先计算百分比列宽，然后将剩余空间分配给
fr列。
为什么表格列宽总是自动调整？
表格列宽自动调整通常是因为缺少
table-layout: fixed，或者表格没有明确的宽度。浏览器默认根据内容调整列宽，导致布局不稳定。另一种情况是，表格嵌套在父元素中，父元素的宽度限制了表格的宽度，也会影响列宽的自动调整。 此外，如果使用了百分比宽度，确保父元素有明确的宽度，否则百分比宽度可能无法正确计算。
如何让表格在小屏幕上也能正常显示？
Replit Ghostwrite
一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。
93 查看详情
在小屏幕上，表格容易出现溢出问题。可以考虑以下方案：
响应式表格： 使用
overflow-x: auto;让表格在水平方向滚动。堆叠式布局： 使用 CSS Media Queries，在小屏幕上将表格的行转换为块级元素，实现垂直堆叠。隐藏部分列： 在小屏幕上隐藏不重要的列，简化显示内容。
/* 响应式表格 */.table-container { overflow-x: auto;}/* 堆叠式布局 */@media (max-width: 768px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; content: attr(data-label); }}HTML结构（堆叠式布局需要）：
列1 列2 内容1 内容2 data-label属性用于在小屏幕上显示列名。
fr单位的兼容性问题和替代方案有哪些？
fr单位的兼容性总体来说不错，现代浏览器都支持。但在一些老旧浏览器（如IE）中可能存在兼容性问题。
替代方案：
calc()函数结合百分比： 可以使用
calc()函数计算剩余空间，例如
width: calc(100% / 3);。 但这种方式不如
fr灵活，需要手动计算比例。Flexbox布局： 可以使用Flexbox布局模拟表格效果，Flexbox的
flex-grow属性类似于
fr单位。Grid布局： Grid布局也可以实现类似的效果，并且比Flexbox更适合复杂的表格布局。
Flexbox示例：
.table-row { display: flex;}.table-cell { flex: 1; /* 类似于 1fr */}.table-cell-2 { flex: 2; /* 类似于 2fr */}选择哪种方案取决于具体的需求和兼容性要求。如果需要兼容老旧浏览器，可以考虑使用
calc()函数或Flexbox。如果只需要支持现代浏览器，
fr单位是更简洁的选择。
以上就是CSS怎样固定表格列宽百分比？fr单位自适应布局方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1087723.html赞 (0)打赏微信扫一扫
支付宝扫一扫
关于作者
相关推荐
调试PHP与MySQL数据库交互时的逻辑错误
调试php与mysql交互时的逻辑错误需要通过以下步骤：1. sql查询验证：在数据库客户端中运行查询，确保正确执行。2. 数据类型检查：确保php传递的数据类型与数据库字段匹配。3. php逻辑逐步调试：使用var_dump()或print_r()输出变量值。4. 使用事务管理数据一致性。5. 启…
vivoY系列摄像头设置怎么调以提升低光拍摄效果？低光模式的优化方法
要提升vivo Y系列低光拍摄效果，需开启夜景模式，利用多帧合成提亮降噪，配合曝光补偿微调（如-0.3至-0.7EV）避免过曝，保持手机稳定防模糊，必要时用HDR平衡光比，慎用闪光灯，优先使用屏幕补光或外部光源，开启AI场景识别辅助优化，手动对焦确保清晰，并保持镜头清洁；在支持专业模式的机型上，可降…
UC浏览器开发者模式怎么开启_UC浏览器开发者选项进入方法
首先通过地址栏输入uc://debug开启调试，其次在设置中启用实验室功能的网页调试模式，最后可连接电脑Chrome进行远程调试。 如果您希望在UC浏览器中调试网页或查看页面的底层信息，可以通过开启开发者模式来实现。这一功能通常用于分析网页性能、排查加载问题或测试响应式布局。 本文运行环境：小米14…
最小化完成任务所需的时间：一种扫描线算法教程
本文介绍了一种使用扫描线算法解决任务调度问题的有效方法。该问题涉及一系列具有开始时间、结束时间和所需完成时间的任务。目标是找到完成所有任务所需的最小总时间，允许同时处理多个任务，且任务完成时间可以是不连续的。本文将详细解释该算法的逻辑，并提供相应的代码示例，帮助读者理解和应用该方法。 问题描述 给定…
多模态AI如何处理医学影像 多模态AI医疗诊断辅助方案
本文将探讨多模态AI如何处理医学影像，并介绍其在医疗诊断辅助中的应用方案。我们将从理解多模态数据的重要性入手，逐步讲解AI处理这些数据的方法和技术，最后展示AI在医学影像诊断中的具体应用案例，以期为相关领域的研究和实践提供参考。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 …
求解完成任务的最短时间：一种基于扫描线的算法教程
本文详细介绍了如何使用扫描线算法解决“求解完成任务的最短时间”问题。该问题涉及在给定的时间范围内完成多个任务，每个任务都有起始时间、结束时间和所需完成时间。本文将深入探讨算法逻辑，并通过Java代码示例展示如何有效地计算完成所有任务所需的最小时间。 问题描述 给定一个任务数组 tasks，其中每个任…
小红书视频违规检测工具有哪些？小红书检测
随着短视频生态的不断壮大，小红书已逐渐成为用户记录生活、分享经验的重要社交平台。在尽情创作的同时，我们也需关注内容是否符合平台规范，防止因违规而影响账号运营。本文将为你梳理目前主流的小红书视频违规检测工具，助你轻松规避风险，实现内容合规发布。 一、小红书视频违规检测工具简介 所谓小红书视频违规检测工…
360极速浏览器如何导入Chrome书签_360极速浏览器从Chrome导入书签步骤
首先通过HTML文件或直接导入功能将Chrome书签迁移到360极速浏览器。1、在Chrome中导出书签为HTML文件，再于360极速浏览器收藏夹管理中选择从HTML文件导入；2、或在360极速浏览器中点击“导入/导出”后选择“导入收藏夹”，直接选取Google Chrome并确认导入，即可完成书签…
快手小店如何打造爆款商品 快手小店选品与推广的秘诀
精准定位目标用户需结合“感同身受”的观察与数据分析，先像用户一样浏览快手，参考同类优质账号的粉丝画像与内容互动模式，再利用快手小店后台的年龄、地域、兴趣等数据画像进行量化验证，并通过评论、私信、直播互动挖掘深层需求；2. 爆款选品核心原则包括高性价比（强调“值不值”而非单纯低价）、强视觉冲击力与易演…
幕布文档怎么导出为PDF或图片
1、在幕布中导出PDF可点击右上角「…」选择导出为PDF，设置页面方向等内容后下载；2、导出图片则在导出选项中选择PNG或JPEG格式生成长图；3、还可通过快捷键Command+P调出打印窗口，选择“另存为PDF”保存文件。 如果您在使用幕布文档时需要将内容分享给他人或进行打印，可能会遇到需要将文档…
快手小店如何提升店铺曝光率 快手小店流量获取的实用策略
提升快手小店曝光和流量的核心是理解“老铁经济”并构建内容、直播、私域与工具协同的闭环；2. 优质短视频需真实有共鸣，避免自嗨式表达，注重前3秒吸引力和场景化呈现；3. 直播要以互动交朋友为核心，提前预热、营造氛围、设置福利，通过讲解价值、解决痛点提升转化；4. 私域运营通过粉丝群、私信维系核心用户，…
豆包AI如何配置语音指令 豆包AI自定义唤醒词设置
本文将指导您如何配置豆包AI的语音指令，并详细介绍如何进行自定义唤醒词的设置，以期帮助您更好地利用豆包AI的智能语音交互功能。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 配置豆包AI的语音指令 要配置豆包AI的语音指令，您需要了解豆包A…
解决Spring Cloud API Gateway中的JWT验证问题
解决Spring Cloud API Gateway中的JWT验证问题 本文旨在解决Spring Cloud API Gateway中使用JWT进行身份验证时遇到的java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter和jav…
UC浏览器如何屏蔽指定网站_UC浏览器屏蔽网站教程
可通过设置黑名单、安装过滤插件或修改Hosts文件屏蔽网站。首先在UC浏览器隐私与安全中添加域名至网站黑名单；其次通过插件中心安装AdBlock类插件并配置拦截规则；最后具备Root权限时可用MT管理器编辑/system/etc/hosts文件，将目标域名指向127.0.0.1实现系统级屏蔽。 如果…
iCloud官网怎么导出备忘录_iCloud备忘录导出备份教程
可通过iCloud官网手动复制、Mac导出为mbox/rtf、iOS设备分享为PDF或文本、第三方工具批量导出等方式将iCloud备忘录备份至本地，确保数据安全迁移与归档。 如果您希望将存储在iCloud中的备忘录导出或进行本地备份，以便在设备更换或数据管理时使用，可以通过多种方式实现。以下是具体的…
格子达学术论文检测系统_格子达期刊论文查重入口
格子达期刊论文查重入口为http://co.gocheck.cn/13924，用户可通过学号密码或微信扫码登录，系统支持论文相似性检测、学生自检及报告提交导师等功能，界面简洁且便于操作，建议收藏网址并及时修改密码以保障账户安全。 格子达学术论文检测系统_格子达期刊论文查重入口在哪里？这是不少用户都关…
多模态AI如何识别化学结构 多模态AI分子式解析技术
本文将探讨多模态AI如何识别化学结构这一前沿技术。我们将详细介绍多模态AI在分子式解析中的核心原理、关键技术以及实际应用，旨在帮助读者理解这一领域的发展现状和未来趋势，并提供一个清晰的学习和操作思路，使您能够掌握多模态AI解析化学结构的方法。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免…
firefox浏览器如何清除指定的网站数据 Firefox浏览器清除单个网站数据教程
首先通过设置页面精准删除特定网站数据，进入“隐私与安全”中的“管理数据”，搜索并移除目标站点；其次可利用地址栏的站点信息面板，一键清除当前访问网站的Cookie与数据；最后可通过安装附加组件实现批量或规则化管理，提升清理效率。 如果您希望在Firefox浏览器中移除某个特定网站的浏览数据，例如缓存、…
linux开发vm虚拟机开发环境共享
经过一段时间的沉寂，我终于抽出时间来整理了一个非常有用的工具。这款工具主要面向使用golang、php和java的linux开发环境。尽管java开发者通常使用图形界面工具进行开发，这里就不详细讨论了，但对于golang或php开发者来说，拥有一个与线上环境相似的linux开发虚拟机是非常必要的，因…
Safari浏览器如何阻止网站跟踪我_Safari浏览器开启“智能防跟踪”功能指南
1、Safari浏览器可通过启用智能防跟踪功能阻止跨站追踪，保护用户隐私。2、在设置中勾选阻止跨站跟踪并选择始终阻止Cookie可增强防护，但可能影响网站登录便利性。3、定期清除所有历史记录能消除过往跟踪数据。4、使用无痕窗口可避免本地留存浏览痕迹，适合敏感操作。 如果您在浏览网页时发现广告内容与您…
