灵活控制表格列宽：CSS实现自动收缩的列-html教程-PHP中文网

灵活控制表格列宽：CSS实现自动收缩的列

心靈之曲

发布： 2025-09-06 16:46:44

原创

846人浏览过

灵活控制表格列宽：css实现自动收缩的列

本文将介绍如何使用 CSS 控制表格列的宽度，实现当表格中新增列时，特定列能够自动收缩以适应可用空间。核心在于使用 max-width 属性限制列的最大宽度，并结合 text-overflow: ellipsis 属性在列内容超出时显示省略号，从而保证表格的整体布局不会超出容器。

实现原理

关键在于对需要自动收缩的列（以下简称“可变列”）应用以下 CSS 属性：

max-width: 设置列的最大宽度。当表格的总宽度超过容器时，可变列会缩小到这个最大宽度。
overflow: hidden: 隐藏超出列宽的内容。
white-space: nowrap: 强制文本不换行，保证文本在一行显示。
text-overflow: ellipsis: 当文本超出列宽时，显示省略号。

示例代码

以下是示例代码，演示了如何实现可变列的自动收缩：

HTML:

立即学习“前端免费学习笔记（深入）”；

百灵大模型

蚂蚁集团自研的多模态AI大模型系列

177

查看详情

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

登录后复制

代码解释: