本文将介绍如何使用 CSS 控制表格列的宽度，实现当表格中新增列时，特定列能够自动收缩以适应可用空间。核心在于使用 max-width 属性限制列的最大宽度，并结合 text-overflow: ellipsis 属性在列内容超出时显示省略号，从而保证表格的整体布局不会超出容器。
实现原理
关键在于对需要自动收缩的列（以下简称“可变列”）应用以下 CSS 属性：
- max-width: 设置列的最大宽度。当表格的总宽度超过容器时，可变列会缩小到这个最大宽度。
- overflow: hidden: 隐藏超出列宽的内容。
- white-space: nowrap: 强制文本不换行，保证文本在一行显示。
- text-overflow: ellipsis: 当文本超出列宽时，显示省略号。
示例代码
以下是示例代码，演示了如何实现可变列的自动收缩：
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>CSS:
.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;
}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.textContent = "Column " + cols;
el = document.createElement("td");
el.className = "fixedCol";
row1.append(el);
}
document.getElementById("myButton").addEventListener('click', AddColumn)代码解释:
- .variCol 类定义了可变列的样式。max-width: 150px 限制了列的最大宽度。
- .fixedCol 类定义了固定宽度的列的样式。
- JavaScript 代码使用 addEventListener 绑定事件监听器，避免了使用内联事件监听器，使代码更易于维护。
注意事项
- 最大宽度的设置: max-width 的值需要根据实际情况进行调整，以保证在正常情况下，可变列能够显示足够的内容。
- 容器宽度: 确保表格容器的宽度设置合理，以便表格能够正确地显示。
- 避免内联事件监听器: 使用 addEventListener 替代 onclick 等内联事件监听器，可以提高代码的可维护性。
总结
通过使用 max-width 和 text-overflow: ellipsis 属性，可以轻松实现表格列的自动收缩功能，从而保证表格在各种情况下都能保持良好的布局和可读性。 结合动态添加列的 JavaScript 代码，可以创建更加灵活和动态的表格。
