CSS怎样固定表格列宽百分比？fr单位自适应布局方案

使用table-layout: fixed确保列宽由设定值决定；2. 设置width: 100%定义表格总宽度；3. 结合百分比与fr单位分配列宽，如width: 20%和width: 1fr；4. 添加word-break: break-all防止内容溢出；5. 响应式场景可采用overflow-x: auto或媒体查询实现堆叠布局；6. fr单位不兼容旧浏览器时可用calc()、flexbox或grid布局替代；该方案通过固定布局与弹性单位结合，实现表格列宽的精确控制与自适应，且在现代浏览器中表现良好，最终形成稳定、响应式的表格布局。

CSS固定表格列宽百分比，同时利用

fr

table-layout: fixed

fr

解决方案：

1. 设置表格布局为固定：

   table-layout: fixed;

   这一属性至关重要，它告诉浏览器，表格的列宽由表格的宽度和

   width

   属性决定，而不是内容。
2. 定义表格宽度：

   width: 100%;

   或其他具体数值，决定表格整体宽度。
3. 使用

   fr

   单位分配列宽： 在
   或
   元素上使用

   width: 1fr;

   、

   width: 2fr;

   等，

   fr

   代表剩余空间比例。
4. 可以结合百分比和

   fr

   ： 例如，某些列固定宽度（百分比或像素），剩余列使用

   fr

   分配。

table {
  width: 100%;
  table-layout: fixed; /* 关键！ */
}

th,
td {
  word-break: break-all; /* 防止内容溢出 */
}

.col-1 {
  width: 20%; /* 百分比固定宽度 */
}

.col-2 {
  width: 1fr; /* 剩余空间自适应 */
}

.col-3 {
  width: 2fr; /* 剩余空间的2倍 */
}

HTML结构：

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

  

    

      
固定宽度
      
自适应列1
      
自适应列2
    
  
  

    

      
内容1
      
内容2 内容很长内容很长内容很长内容很长
      
内容3 内容很长内容很长内容很长内容很长内容很长内容很长
    
    

      
内容4
      
内容5
      
内容6
    
  

word-break: break-all;

百分比列宽和

fr

fr

为什么表格列宽总是自动调整？

表格列宽自动调整通常是因为缺少

table-layout: fixed

如何让表格在小屏幕上也能正常显示？

黑点工具

在线工具导航网站，免费使用无需注册，快速使用无门槛。

下载

在小屏幕上，表格容易出现溢出问题。可以考虑以下方案：

1. 响应式表格： 使用

   overflow-x: auto;

   让表格在水平方向滚动。
2. 堆叠式布局： 使用 CSS Media Queries，在小屏幕上将表格的行转换为块级元素，实现垂直堆叠。
3. 隐藏部分列： 在小屏幕上隐藏不重要的列，简化显示内容。

/* 响应式表格 */
.table-container {
  overflow-x: auto;
}

/* 堆叠式布局 */
@media (max-width: 768px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
  }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-label);
  }
}

HTML结构（堆叠式布局需要）：

  

    

      
列1
      
列2
    
  
  

    

      
内容1
      
内容2
    
  

data-label

fr

fr

替代方案：

1. calc()

   函数结合百分比： 可以使用

   calc()

   函数计算剩余空间，例如

   width: calc(100% / 3);

   。 但这种方式不如

   fr

   灵活，需要手动计算比例。
2. Flexbox布局： 可以使用Flexbox布局模拟表格效果，Flexbox的

   flex-grow

   属性类似于

   fr

   单位。
3. Grid布局： Grid布局也可以实现类似的效果，并且比Flexbox更适合复杂的表格布局。

Flexbox示例：

.table-row {
  display: flex;
}

.table-cell {
  flex: 1; /* 类似于 1fr */
}

.table-cell-2 {
  flex: 2; /* 类似于 2fr */
}

选择哪种方案取决于具体的需求和兼容性要求。如果需要兼容老旧浏览器，可以考虑使用

calc()

fr