本文旨在解决表格中某一列自动占据剩余空间，并在新增列时自动收缩宽度的问题。通过 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 代码示例：
表格列自适应宽度示例 .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; }Add Column 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);
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 的值，以达到最佳的显示效果。
以上就是实现表格列的自适应宽度：CSS 技巧与最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574968.html
微信扫一扫 
支付宝扫一扫 
