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

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制

   登录后复制
   单位分配列宽： 在

   <td>

   登录后复制
   或

   <th>

   登录后复制
   元素上使用

   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结构：

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

      <td>内容1
      <td>内容2 内容很长内容很长内容很长内容很长
      <td>内容3 内容很长内容很长内容很长内容很长内容很长内容很长
      <td>内容4
      <td>内容5
      <td>内容6

  

    

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

    

    
    

    
  

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结构（堆叠式布局需要）：

      <th>列1
      <th>列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

以上就是CSS怎样固定表格列宽百分比？fr单位自适应布局方案的详细内容，更多请关注php中文网其它相关文章！