HTML表格列宽百分比分配的CSS格式实现方法-html教程-PHP中文网

HTML表格列宽百分比分配的CSS格式实现方法

雪夜

发布： 2025-10-01 16:22:02

原创

795人浏览过

设置table-layout: fixed;可实现HTML表格列宽按百分比分配，需将该属性应用于<table>元素以启用固定布局模式，使列宽严格按设定比例分配。

html表格列宽百分比分配的css格式实现方法

在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%：

落笔AI

AI写作，AI写网文、AI写长篇小说、短篇小说

查看详情

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

<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>或单元格宽度设置配合使用，就能稳定实现百分比列宽分配。

以上就是HTML表格列宽百分比分配的CSS格式实现方法的详细内容，更多请关注php中文网其它相关文章！