本文旨在解决表格中某一列自动占据剩余空间，并在新增列时自动收缩宽度的问题。通过 CSS 的 max-width 属性和 text-overflow: ellipsis 属性，以及适当的 JavaScript 代码优化，可以实现表格列的自适应宽度和内容省略显示，从而避免表格超出容器范围，保证页面布局的完整性和可读性。
利用 max-width 实现列宽自适应
在表格布局中，经常会遇到需要某一列自动填充剩余空间，并且在新增列时能够自动收缩宽度以适应新的内容。传统的 width: 100% 或者 width: 99% 往往会导致表格超出容器的范围。一个更有效的解决方案是使用 max-width 属性。
max-width 允许元素在可用空间内扩展，但不会超过指定的最大宽度。通过为需要自适应宽度的列设置 max-width，可以确保该列在初始状态下填充剩余空间，并在新增列时自动收缩。
.variCol {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 150px; /* 可以根据实际情况调整 */
vertical-align: top;
background-color: yellow;
}在上述代码中，.variCol 类应用于需要自适应宽度的列。max-width: 150px; 限制了该列的最大宽度。请注意，这个值需要根据实际内容和布局进行调整。
立即学习“前端免费学习笔记（深入）”；
处理溢出文本：text-overflow: ellipsis
当列宽收缩时，可能会出现文本内容溢出的情况。为了提高用户体验，可以使用 text-overflow: ellipsis 属性来省略溢出的文本，并用省略号 (...) 表示。
.variCol {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}overflow: hidden; 隐藏溢出的内容，white-space: nowrap; 阻止文本换行，text-overflow: ellipsis; 则在文本溢出时显示省略号。
JavaScript 代码优化
以下是添加列的 JavaScript 代码示例，同时移除了内联事件监听器，并使用了 addEventListener 方法，这是一种更推荐的做法。
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.textContent = "Column " + cols;
el = document.createElement("td");
el.className = "fixedCol";
row1.append(el);
}
document.getElementById("myButton").addEventListener('click', AddColumn);这段代码首先获取表格的 headRow 和 row1 元素，然后创建一个新的 td 元素，并将其添加到表格中。
完整示例代码
以下是完整的 HTML、CSS 和 JavaScript 代码示例：
表格列自适应宽度示例 Add Column
Column 1 Variable Width Column: Use available Current Behavior table width expands beyond container Desired Behavior Width of this column to shrink to make room for new columns
总结
通过结合 max-width 属性和 text-overflow: ellipsis 属性，可以有效地实现表格列的自适应宽度和内容省略显示。同时，优化 JavaScript 代码，避免使用内联事件监听器，可以提高代码的可维护性和可读性。在实际应用中，需要根据具体情况调整 max-width 的值，以达到最佳的显示效果。
