直接给 <table> 加 overflow-x: auto 无效，因其默认作为独立格式化上下文且无视自身 overflow；必须用外层 div 设置 overflow-x: auto、display: block、width: 100% 等，并将 <table> 设为 display: block 和 min-width: max-content 才能触发横向滚动。

为什么直接给 <table> 加 overflow-x: auto 没用

浏览器把 <table> 当作独立格式化上下文，它会无视自身 overflow 设置，优先按内容撑开宽度。哪怕你写了 width: 100%，也会被内部单元格的最小自然宽（比如一长串 URL 或中文不换行文本）顶破，父容器根本“感知不到”溢出，滚动条压根不会出现。

• 错误写法：<table style="overflow-x: auto"> —— 完全不生效
• <table> 默认行为是「撑满且不溢出」，不是「可滚动容器」
• 加了 overflow-x: auto 却没滚动条，90% 是因为没切断表格渲染流

外层 <div> 必须设哪些样式才能触发横向滚动

滚动必须由外层容器控制，且该容器要能「识别溢出」并「允许拖拽」。漏掉任意一项，滚动条就可能不出现、卡顿或拖不动。

• overflow-x: auto —— 必须，别用 scroll（空时也占滚动条高度，iOS 易卡）
• width 或 max-width —— 必须设具体值，如 width: 100% 可行，fit-content 不可靠
• white-space: nowrap —— 防止 <th>/<td> 内文字换行干扰宽度计算
• display: block —— 避免被父级 flex 布局压缩（尤其在 Bootstrap 或 Tailwind 中）
• -webkit-overflow-scrolling: touch —— iOS Safari 必加，否则触控拖拽失灵或卡顿

<table> 本身要怎么改才响应外部滚动

让表格听从外层容器的 overflow 控制，关键就是让它脱离默认表格渲染流。否则列宽对齐、自动换行等行为会干扰溢出判断。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• display: block —— 强制转为块级，否则浏览器仍按表格算法算宽
• min-width: max-content —— 确保表格最小宽度 = 所有列内容总宽，避免滚动条被“压缩掉”
• 删掉 width: 100% —— 这会让它反向拉伸填满父容器，彻底失去溢出前提
• 禁用 table-layout: fixed + 百分比列宽 —— 小屏下会压缩列宽到不可读，且错位风险高

表头固定 + 横向滚动怎么不崩列宽

一旦 <table> 设了 display: block，<thead> 和 <tbody> 就不再自动对齐列宽。纯 CSS 实现固定表头，靠的是显式约束和 sticky 行为。

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

• 把 position: sticky 加在 <th> 上（不是 <thead>），配合 top: 0 和背景色防透
• 每列 <th> 和对应 <td> 必须设相同 min-width 或 width（如 min-width: 120px）
• 避免在 <td> 里用 flex 或 position: absolute —— 它们会破坏宽度继承
• 如果列宽差异大，优先用 white-space: nowrap + text-overflow: ellipsis 截断，而不是硬撑

滚动不是加个 overflow-x: auto 就完事的功能；真正卡点在表格渲染模型和移动端 touch 事件机制——尤其是 iOS Safari 对横向滚动的限制，至今仍需靠 -webkit-overflow-scrolling: touch 和 touch-action: pan-x 补救。