设置table-layout: fixed;可实现HTML表格列宽按百分比分配，需将该属性应用于<table>元素以启用固定布局模式，使列宽严格按设定比例分配。
在HTML表格中实现列宽按百分比分配，主要通过CSS控制table及其子元素的宽度。关键在于设置表格布局模式并明确指定各列的宽度比例。
设置表格布局为固定（fixed）
使用table-layout: fixed可以让表格列宽严格按照设定的百分比分配，避免内容影响布局。
-
table-layout: fixed; 应用于
<table>元素，启用固定布局模式 - width: 100%使表格充满父容器
为列或单元格设置百分比宽度
可通过<col>标签或直接设置<td>/<th>的宽度来定义列宽。
- <col>元素更语义化且便于统一管理列样式
- <col style="width: 25%"> 表示该列占总宽25%
- td, th应用
width: 30%等样式
完整示例代码
以下是一个四列表格，列宽分别为25%、25%、30%、20%：
立即学习“前端免费学习笔记（深入）”；
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 30%;">
<col style="width: 20%;">
</colgroup>
<tr>
<th>姓名</th>
<th>部门</th>
<th>职位</th>
<th>状态</th>
</tr>
<tr>
<td>张三</td>
<td>技术部</td>
<td>前端开发</td>
<td>在职</td>
</tr>
</table>
基本上就这些，关键是table-layout: fixed和<col>或单元格宽度设置配合使用，就能稳定实现百分比列宽分配。
