本文旨在解决表格中某一列如何根据可用空间自动调整宽度，并在新增列时能够收缩自身宽度以适应布局的问题。通过设置max-width、text-overflow: ellipsis等CSS属性，以及优化JavaScript代码，实现表格列的灵活伸缩和内容省略显示，确保表格在容器内正常显示，避免超出容器边界。
在构建动态表格时，经常会遇到需要某一列的宽度根据可用空间自动调整，并且在新增列时能够自动收缩以适应布局的情况。以下介绍一种使用 CSS 和 JavaScript 实现此效果的方法。
核心 CSS 属性
以下 CSS 属性是实现自适应宽度和收缩的关键：
- max-width: 限制列的最大宽度，防止列无限扩展。
- overflow: hidden: 隐藏超出列宽的内容。
- text-overflow: ellipsis: 当文本溢出时，显示省略号。
- white-space: nowrap: 强制文本不换行，保持在同一行显示。
.variCol {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px; /* 设置最大宽度 */
vertical-align: top;
background-color: yellow;
}
.fixedCol {
position: relative;
width: 150px;
}
table {
position: relative;
width: 700px;
max-width: 100%; /* 确保表格不会超出容器 */
height: 200px;
border: 1px solid black;
}
#myButton {
background-color: lightgray;
cursor: pointer;
}
#tableContainer {
position: relative;
width: 700px;
height: 300px;
border: 1px solid black;
}在上述代码中，.variCol 类应用于需要自适应宽度的列。 max-width属性设置了列的最大宽度，overflow: hidden和text-overflow: ellipsis 属性确保超出部分显示为省略号。table元素的 max-width: 100% 确保表格不会超出其容器。
立即学习“前端免费学习笔记（深入）”；
JavaScript 代码
以下 JavaScript 代码用于动态添加列：
function AddColumn() {
const body = document.getElementById("body");
const head = document.getElementById("headRow")
const row1 = document.getElementById("row1");
let el = document.createElement("td");
const cols = head.childElementCount + 1;
el.className = "fixedCol";
head.append(el);
el = document.createElement("td");
el.className = "fixedCol";
row1.append(el);
}
document.getElementById("myButton").addEventListener('click', AddColumn)这段代码通过 AddColumn 函数动态地向表格添加新的列。 addEventListener 方法用于绑定按钮的点击事件，避免了使用内联事件监听器，提升了代码的可维护性。
HTML 结构
以下是 HTML 结构示例：
<div id="tableContainer">
<table id="table">
<thead>
<tr id="headRow">
<td class="fixedCol">Column 1</td>
<td class="variCol">Variable Width Column: Use available</td>
</tr>
</thead>
<tbody id="body">
<tr id="row1">
<td class="fixedCol">Current Behavior</td>
<td class="variCol">table width expands beyond container </td>
</tr>
<tr id="row1">
<td class="fixedCol">Desired Behavior</td>
<td class="variCol">Width of this column to shrink to make room for new columns </td>
</tr>
</tbody>
</table>
</div>
<span id="myButton">Add Column</span>这个HTML结构定义了一个包含表格的容器，以及一个用于添加列的按钮。 注意 variCol 类被应用到需要自适应宽度的列上。
总结
通过结合 CSS 的 max-width、overflow、text-overflow 和 white-space 属性，以及 JavaScript 动态添加列的功能，可以实现表格列的自适应宽度和收缩效果。 这种方法能够确保表格在容器内正常显示，并且在新增列时能够自动调整布局，提升用户体验。 避免使用内联事件监听器，使用 addEventListener 绑定事件，可以提高代码的可维护性。
