表格错位主因是样式未压制默认行为，须同时设置border-collapse: collapse、table-layout: fixed及统一th/td的padding，并确保table有明确宽度、col标签正确赋值、嵌套元素加max-width: 100%。
表格错位不是结构写错了，而是样式没压住默认行为。最直接的解法是三件事一起做：border-collapse: collapse、table-layout: fixed、统一th和td的padding。
为什么加了border-collapse: collapse还是错位
因为只加这一个不够——它只解决边框双线问题，但列宽仍由内容撑开，导致相邻行单元格宽度不一致。常见于某行有长 URL 或图片，其他行被“带歪”。
-
border-collapse: collapse必须配合table-layout: fixed才真正稳定 - 如果用了
col标签定义列宽，记得给col设width（比如<col style="width: 150px">），否则fixed形同虚设 - 某些 UI 框架（如 Bootstrap）会重置
td的padding，检查 computed styles 确认最终值是否一致
table-layout: fixed生效的前提条件
这个属性是开关，但它不会自己找宽度。浏览器需要明确知道“列宽从哪来”，否则仍走 auto 布局。
- 必须给
table设width（如width: 100%或width: 800px） - 列宽来源优先级：第一行
th/td的width>col标签的width> 表格总宽均分 - 如果第一行单元格没设
width，且没用col，fixed就等于没开
嵌套元素撑破td怎么办
图片、div、pre这类块级或自适应元素，会无视td宽度限制，直接拉伸整列表格。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 所有嵌套在
td里的非文本元素，都得加max-width: 100%（图片还要加height: auto） - 如果嵌套的是
pre或代码块，额外加white-space: pre-wrap; overflow-x: auto防横向溢出 - 避免在
td里用float或position: absolute——它们会脱离表格流，破坏对齐
移动端表格错位的隐形原因
不是 CSS 写错了，是容器没给宽度约束。iOS Safari 和部分 Android WebView 在table-layout: fixed下，若父容器没明确width或max-width，会退回到 auto 布局。
- 外层包裹容器（比如
div）必须设width或max-width，不能只靠table { width: 100% } - 响应式场景下，建议用
overflow-x: auto包一层，比强行压缩列宽更可靠 - 别依赖
vw单位设table宽度——某些旧版 WebView 对vw解析不稳定
最容易被跳过的其实是col标签和外层容器宽度。很多人写了table-layout: fixed就以为万事大吉，结果发现第一行没设宽、col漏写了、或者table被包在display: flex里却没给父容器定宽——这些地方一漏，错位立刻回来。
