本文旨在解决表格中某一列如何根据可用空间自动调整宽度，并在新增列时能够收缩自身宽度以适应布局的问题。通过设置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 结构示例：
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
这个HTML结构定义了一个包含表格的容器，以及一个用于添加列的按钮。 注意 variCol 类被应用到需要自适应宽度的列上。
总结
通过结合 CSS 的 max-width、overflow、text-overflow 和 white-space 属性，以及 JavaScript 动态添加列的功能，可以实现表格列的自适应宽度和收缩效果。 这种方法能够确保表格在容器内正常显示，并且在新增列时能够自动调整布局，提升用户体验。 避免使用内联事件监听器，使用 addEventListener 绑定事件，可以提高代码的可维护性。
以上就是CSS 实现表格列的自适应宽度与收缩的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574974.html
微信扫一扫 
支付宝扫一扫 
