width: 100% 失效的三大前提是：父容器无宽、未设 table-layout: fixed、col 标签未紧贴 table 开始标签后；需同时满足三者才能使表格真正撑满。

直接给 table 写 width: 100% 几乎总失效——不是写法错，而是缺了三个硬性前提：父容器没宽、table-layout 没设、<col> 没放对位置。

为什么 width: 100% 看似写了却撑不满

浏览器默认用 table-layout: auto，列宽由内容决定，width: 100% 只是“尝试占满”，但一旦某列有长文本或图片，整行就会被撑开，视觉上还是溢出或错位。更隐蔽的问题是：父容器（比如一个 <div>）若没设 <code>width 或 max-width，百分比就失去参照，直接退化为 auto。

• 必须同时声明：table { width: 100%; table-layout: fixed; }
• 父容器要有可计算宽度，例如 div { max-width: 1200px; } 或 width: 100vw
• <col> 必须紧贴 <table> 开始标签后、<code><thead> 前，不能塞进 <code><thead> 或 <code><tbody> 里 <h3> <code><col> 是唯一稳定控列宽的方式

  用 <th style="width: 30%"> 或 <code><td width="200"> 都不可靠：前者在 <code>auto 模式下常被忽略，后者在响应式下易僵硬。<col> 是 HTML 专为列级样式设计的语义元素，优先级最高，且不依赖首行渲染。

  • 正确结构：

    序号	名称	状态

  • 单位只支持 %、px、em；fr 是 Grid 单位，这里无效
  • 没写 <col> 的列，会 fallback 到第一行 <th> 的 <code>width，再没就坍缩成最小内容宽

    小屏下别硬撑，该堆叠就堆叠

    列数 ≥ 4 或字段语义强（如“下单时间”“物流单号”）时，横向滚动体验差，强行自适应反而降低可读性。此时应放弃“表格即表格”的执念，用 CSS 把每行转成独立卡片。

    

    Article To Html

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

    下载
    • 给每个 <td> 加 <code>data-label：<td data-label="状态">已发货</td>
    • 窄屏时用 @media (max-width: 768px) 隐藏 <thead>，并设 <code>tr { display: block; margin-bottom: 1rem; }
    • td { display: block; position: relative; }，再用 ::before { content: attr(data-label); font-weight: bold; } 模拟表头
    • 避免用 float 或 inline-block，它们在窄屏换行后容易错位

    内容溢出必须配对处理

    table-layout: fixed 锁定了列宽，但不等于内容自动适配。长 URL、无空格英文、未约束的图片仍会破坏布局。

    • 单行截断：td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    • 自动换行：td { word-break: break-word; white-space: normal; }
    • 图片兜底：img { max-width: 100%; height: auto; }，否则无视列宽
    • 边框影响总宽？加 box-sizing: border-box;，让 width 包含 padding 和 border

    最常被跳过的不是怎么写 CSS，而是检查父容器有没有宽、table-layout: fixed 有没有生效、<col> 标签有没有放在 <table> 后立刻的位置——这三个点一漏，所有后续样式都白调。</table>