本文将介绍如何使用 CSS 控制表格列的宽度，实现当表格中新增列时，特定列能够自动收缩以适应可用空间。核心在于使用 max-width 属性限制列的最大宽度，并结合 text-overflow: ellipsis 属性在列内容超出时显示省略号，从而保证表格的整体布局不会超出容器。
实现原理
关键在于对需要自动收缩的列（以下简称“可变列”）应用以下 CSS 属性：
max-width: 设置列的最大宽度。当表格的总宽度超过容器时，可变列会缩小到这个最大宽度。overflow: hidden: 隐藏超出列宽的内容。white-space: nowrap: 强制文本不换行，保证文本在一行显示。text-overflow: ellipsis: 当文本超出列宽时，显示省略号。
示例代码
以下是示例代码，演示了如何实现可变列的自动收缩：
HTML:
立即学习“前端免费学习笔记（深入）”；
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
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 代码，可以创建更加灵活和动态的表格。
以上就是灵活控制表格列宽：CSS实现自动收缩的列的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574972.html
微信扫一扫 
支付宝扫一扫 
