CSS固定列宽百分比与fr自适应布局详解

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《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结构：

<table>
  <thead>
    <tr>
      <th class="col-1">固定宽度</th>
      <th class="col-2">自适应列1</th>
      <th class="col-3">自适应列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2 内容很长内容很长内容很长内容很长</td>
      <td>内容3 内容很长内容很长内容很长内容很长内容很长内容很长</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

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

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="列1">内容1</td>
      <td data-label="列2">内容2</td>
    </tr>
  </tbody>
</table>

data-label 属性用于在小屏幕上显示列名。

fr单位的兼容性问题和替代方案有哪些？

fr 单位的兼容性总体来说不错，现代浏览器都支持。但在一些老旧浏览器（如IE）中可能存在兼容性问题。

替代方案：

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()函数或Flexbox。如果只需要支持现代浏览器，fr单位是更简洁的选择。

今天关于《CSS固定列宽百分比与fr自适应布局详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于CSS,自适应布局,表格列宽,fr单位,table-layout:fixed的内容请关注golang学习网公众号！