如何为动态添加内容的表格首列实现宽度变化动画？

问题背景 #

我有一个表格：

给第一列设置width: 0，表格宽度设为100%，此时第一列实际宽度由内容决定。当给第一列动态添加内容后：

第一列会被内容撑宽，但CSS的width属性仍保持0。尝试全局设置transition: 1s all无效，只有手动修改width属性时动画才生效（示例中第二个按钮点击效果）。

示例代码 #

JavaScript

function addContent() {
  var content = document.getElementById("content");
  content.innerHTML += "content";
}

function changeWidth() {
  var content = document.getElementById("content");
  content.style.width = "70%";
}

CSS

* {
  transition: 1s all;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table tr td:first-child {
  width: 0;
  white-space: nowrap;
}

table,
td {
  border: 1px solid #000;
}

input.add-content {
  margin-top: 30px;
}

HTML

<table>
  <tr>
    <td id="content">Column 1-1</td>
    <td>Column 1-2</td>
    <td>Column 1-3</td>
  </tr>
  <tr>
    <td>Column 2-1</td>
    <td>Column 2-2</td>
    <td>Column 2-3</td>
  </tr>
  <tr>
    <td>Column 3-1</td>
    <td>Column 3-2</td>
    <td>Column 3-3</td>
  </tr>
</table>

<input type="button" value="给第一列添加内容" class="add-content" onClick="addContent()" />
<input type="button" value="设置列宽为70%" class="add-content" onClick="changeWidth()" />

解决方案 #

CSS过渡只对明确设置的CSS属性变化生效，当列宽由内容自动撑开时，width属性并未改变（始终是0），所以过渡不触发。要实现动画效果，可以通过以下几种方式：

方案1：用max-width替代width

将第一列的width改为max-width: 0，添加内容时动态修改max-width为内容实际宽度：

table tr td:first-child {
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 1s ease;
}

修改JavaScript：

function addContent() {
  var content = document.getElementById("content");
  content.innerHTML += "content";
  // 获取内容实际宽度，设置为max-width
  const contentWidth = content.scrollWidth;
  content.style.maxWidth = contentWidth + "px";
}

原理：初始max-width:0限制列宽，添加内容后将max-width设为内容实际宽度，触发过渡动画。

方案2：用容器包裹内容，动画容器宽度

给第一列的内容套一个容器，通过动画容器的width属性实现效果：

<td><div id="content" class="content-wrap">Column 1-1</div></td>

.content-wrap {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: width 1s ease;
}

function addContent() {
  var content = document.getElementById("content");
  content.innerHTML += "content";
  const contentWidth = content.scrollWidth;
  content.style.width = contentWidth + "px";
}

原理：通过容器的width变化触发过渡，表格列会跟随容器宽度自动调整，实现动画效果。

方案3：用MutationObserver监听内容变化自动触发动画

利用MutationObserver监听内容变化，实时更新列宽并触发动画：

const content = document.getElementById("content");
const observer = new MutationObserver(() => {
  const contentWidth = content.scrollWidth;
  // 先重置宽度，再设置新宽度触发过渡
  content.style.width = "0";
  setTimeout(() => {
    content.style.width = contentWidth + "px";
  }, 0);
});
observer.observe(content, { childList: true, subtree: true });

function addContent() {
  content.innerHTML += "content";
}

这种方式适合内容频繁变化的场景，自动监听内容更新并触发动画。

内容的提问来源于stack exchange，提问作者Mark twen