HTML table表格能否同时使用百分比和固定值设置列宽？

可以实现，你示意图中展示的「部分列固定宽度、其余列混合百分比/弹性适配」的表格布局，是行业内非常通用的实现方案。

依赖CSS的table-layout: fixed属性，开启后浏览器会严格按照你定义的列宽规则渲染表格，不会自动根据内容调整列宽，同时支持px、百分比等多种单位混合使用。

1. 原生HTML+CSS实现 #

<style>
.custom-table {
  /* 表格宽度占满父容器 */
  width: 100%;
  /* 核心属性：开启固定布局模式，支持混合单位列宽 */
  table-layout: fixed;
  border-collapse: collapse;
}
.custom-table th, .custom-table td {
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  /* 可选：内容超出显示省略号，避免撑开列 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 固定宽度列配置 */
.fixed-column {
  width: 120px;
  /* 如需彻底锁死宽度不被压缩，可加以下配置 */
  min-width: 120px;
  max-width: 120px;
}
/* 百分比宽度列配置 */
.percent-column {
  width: 30%;
}
/* 弹性列无需设置宽度，自动占满剩余空间 */
</style>

<table class="custom-table">
  <!-- 统一通过colgroup定义列宽规则 -->
  <colgroup>
    <col class="fixed-column">
    <col class="percent-column">
    <col>
    <col class="fixed-column">
  </colgroup>
  <thead>
    <tr>
      <th>固定操作列（120px）</th>
      <th>名称列（30%宽度）</th>
      <th>描述列（弹性适配）</th>
      <th>状态列（120px）</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容区域 -->
  </tbody>
</table>

2. 前端UI组件库实现 #

主流前端框架的表格组件（Ant Design、Element UI、Vuetify等）都原生支持混合单位列宽，直接在列配置项中传对应值即可：

// Ant Design / Element UI 列配置示例
const tableColumns = [
  { title: '操作', width: 120, dataIndex: 'action' }, // 数字默认单位为px，固定宽度
  { title: '产品名称', width: '30%', dataIndex: 'productName' }, // 字符串百分比单位
  { title: '产品描述', dataIndex: 'productDesc' }, // 不设置width自动占满剩余空间
  { title: '状态', width: 100, dataIndex: 'status' }
]

• 未开启table-layout: fixed时，默认的自动表格布局下你设置的列宽只会作为参考值，浏览器会优先根据内容多少调整列宽，规则不会严格生效。
• 如果不需要内容溢出省略，去掉对应的overflow相关样式即可，内容超出会自动换行。

内容的提问来源于stack exchange，提问作者Samuel