CSS 实现表格列的自适应宽度与收缩

本文旨在解决表格中某一列如何根据可用空间自动调整宽度，并在新增列时能够收缩自身宽度以适应布局的问题。通过设置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 代码用于动态添加列：

星火作家大神

星火作家大神是一款面向作家的AI写作工具

31

查看详情

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 结构示例：

<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>

这个HTML结构定义了一个包含表格的容器，以及一个用于添加列的按钮。 注意 variCol 类被应用到需要自适应宽度的列上。

总结

通过结合 CSS 的 max-width、overflow、text-overflow 和 white-space 属性，以及 JavaScript 动态添加列的功能，可以实现表格列的自适应宽度和收缩效果。 这种方法能够确保表格在容器内正常显示，并且在新增列时能够自动调整布局，提升用户体验。 避免使用内联事件监听器，使用 addEventListener 绑定事件，可以提高代码的可维护性。

以上就是CSS 实现表格列的自适应宽度与收缩的详细内容，更多请关注php中文网其它相关文章！

相关标签：

css javascript java html app ai 点击事件 css属性 overflow red JavaScript css html 事件 overflow table