HTML表格如何设置宽度百分比（代码分享）-html教程-PHP中文网

必须同时设置 table-layout: fixed 和 table 宽度，否则百分比列宽无效；col 的 width 属性已废弃，需用 css style="width: x%" 且仅在 fixed 模式下生效。

html表格如何设置宽度百分比（代码分享）

直接给 <table> 写 <code>width: 100% 不够，必须同时启用 table-layout: fixed，否则百分比列宽根本不会生效——这是 90% 的人卡住的第一步。

为什么 `<col width="30%">` 不起作用

HTML5 已将 col 的 width 属性标记为 obsolete（已废弃），现代浏览器（Chrome/Firefox/Safari）基本忽略它。你写的 <col width="30%"> 看似合理，实际只是个无效声明。

必须改用 CSS 的 style="width: 30%" 绑定在 <col> 上，且仅在 table-layout: fixed 下才被尊重
<col> 本身不渲染，它的宽度只影响后续所有行的对应列，所以不能靠它“撑开”表格——<table> 自身必须有明确宽度 <li>如果父容器是 <code>display: flex，且未设置主轴方向或未约束宽度，width: 100% 可能计算为 0

`table-layout: fixed` 是列宽可控的前提

不加这个声明，浏览器默认用 table-layout: auto：它会扫描所有行、所有单元格内容，找出每列最大宽度再分配——此时你设的百分比会被完全无视，响应式也容易断裂。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

加上后，列宽只由第一行 <th>/<code><td> 或 <code><col> 的 CSS width 决定，后续内容再长也不会撑开列
推荐用 <colgroup></colgroup> + <col>，避免首行单元格被 JS 动态修改导致宽度错乱
列宽之和不必严格等于 100%，浏览器会按比例缩放；但设成 100% 更易预测行为

完整可运行代码示例（含防溢出处理）

以下代码能真正让三列按 30%/50%/20% 分配，且在移动端不横向滚动：

<div style="width: 100%; max-width: 800px;">
  <table style="table-layout: fixed; width: 100%; border-collapse: collapse; box-sizing: border-box;">
<colgroup>
<col style="width: 30%;">
<col style="width: 50%;">
<col style="width: 20%;">
</colgroup>
<thead><tr>
<th>姓名</th>
<th>邮箱</th>
<th>状态</th>
</tr></thead>
<tbody><tr>
<td>张三</td>
<td>long-email-address@example.com</td>
<td>在职</td>
</tr></tbody>
</table>
</div>
<style>
  td, th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  img { max-width: 100%; height: auto; }
</style>

<div> 提供明确宽度上下文，<code>max-width 防止大屏下过宽
box-sizing: border-box 确保边框和 padding 不撑出总宽
white-space: nowrap + overflow: hidden + text-overflow: ellipsis 控制单行溢出，<td> 默认是 <code>table-cell，可直接生效
图片必须加 max-width: 100%，否则会破坏列宽基准

最易被忽略的是：表格自身没宽度，所有列宽声明都白写；而一旦用了 table-layout: fixed，内容溢出就立刻变得可见——这两点必须同步处理，缺一不可。