使用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单位的特性。前者确保表格宽度固定，后者让列在剩余空间中自适应。
解决方案：
-
设置表格布局为固定：
table-layout: fixed;
这一属性至关重要，它告诉浏览器，表格的列宽由表格的宽度和width
属性决定，而不是内容。 -
定义表格宽度：
width: 100%;
或其他具体数值，决定表格整体宽度。 -
使用
fr
单位分配列宽： 在<td>
或<th>
元素上使用width: 1fr;
、width: 2fr;
等，fr
代表剩余空间比例。 -
可以结合百分比和
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，或者表格没有明确的宽度。浏览器默认根据内容调整列宽，导致布局不稳定。另一种情况是，表格嵌套在父元素中，父元素的宽度限制了表格的宽度，也会影响列宽的自动调整。 此外，如果使用了百分比宽度，确保父元素有明确的宽度，否则百分比宽度可能无法正确计算。
如何让表格在小屏幕上也能正常显示？
在小屏幕上，表格容易出现溢出问题。可以考虑以下方案：
-
响应式表格： 使用
overflow-x: auto;
让表格在水平方向滚动。 - 堆叠式布局： 使用 CSS Media Queries，在小屏幕上将表格的行转换为块级元素，实现垂直堆叠。
- 隐藏部分列： 在小屏幕上隐藏不重要的列，简化显示内容。
/* 响应式表格 */
.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）中可能存在兼容性问题。
替代方案：
-
calc()
函数结合百分比： 可以使用calc()
函数计算剩余空间，例如width: calc(100% / 3);
。 但这种方式不如fr
灵活，需要手动计算比例。 -
Flexbox布局： 可以使用Flexbox布局模拟表格效果，Flexbox的
flex-grow
属性类似于fr
单位。 - Grid布局： Grid布局也可以实现类似的效果，并且比Flexbox更适合复杂的表格布局。
Flexbox示例：
.table-row {
display: flex;
}
.table-cell {
flex: 1; /* 类似于 1fr */
}
.table-cell-2 {
flex: 2; /* 类似于 2fr */
}选择哪种方案取决于具体的需求和兼容性要求。如果需要兼容老旧浏览器，可以考虑使用
calc()函数或Flexbox。如果只需要支持现代浏览器，
fr单位是更简洁的选择。
