如何设置div宽度使其与table宽度始终保持相等？

嗨，这个需求其实有几种靠谱的实现方式，我给你整理了两个常用的方案，你可以根据自己的场景来选：

如果你的项目不需要兼容太老的浏览器，这个纯CSS方案是最省心的，不需要写任何JS就能自动同步宽度：

首先我们把wrapper2设置为容器查询上下文，这样里面的元素（包括table）的尺寸可以作为外部元素的参考：

/* 让wrapper2成为容器查询的基准容器 */
.wrapper2 {
  container-type: inline-size; /* 基于内联方向的尺寸（也就是宽度） */
}

/* 让div1直接继承容器的宽度，和table保持一致 */
.div1 {
  width: 100%;
  /* 关键：和table保持相同的盒模型，避免border/padding导致宽度偏差 */
  box-sizing: border-box;
  /* 如果你需要和table的视觉完全对齐，还可以同步table的border、padding等样式 */
}

/* 同时给table也设置盒模型，确保宽度计算准确 */
#table {
  box-sizing: border-box;
  /* 这里可以根据你的需求设置table的其他样式，比如border-collapse之类的 */
}

这个方案的优点是完全动态，table宽度变化时div1会自动跟着变，而且代码简洁。不过要注意兼容性：Chrome 105+、Firefox 110+、Safari 16.4+以上的浏览器才支持容器查询。

如果需要兼容旧浏览器，或者table的宽度会因为数据加载、用户操作等动态变化，那用JS监听并同步是更稳妥的选择：

// 获取目标元素
const div1 = document.querySelector('.div1');
const table = document.getElementById('table');

// 定义同步宽度的函数
function syncDivWidth() {
  // 获取table的实际渲染宽度（包含border和padding）
  const tableActualWidth = table.offsetWidth;
  // 给div1设置宽度
  div1.style.width = `${tableActualWidth}px`;
}

// 页面加载完成后先同步一次
window.addEventListener('load', syncDivWidth);

// 用ResizeObserver监听table的宽度变化，实时同步
const resizeObserver = new ResizeObserver(syncDivWidth);
resizeObserver.observe(table);

// 注意：如果有其他操作会改变table宽度（比如点击按钮加载新数据），记得手动调用syncDivWidth()

这个方法兼容性更好，几乎所有现代浏览器都支持ResizeObserver，就算是旧浏览器也可以用setInterval或者监听window.resize来替代（不过ResizeObserver更精准）。

额外注意事项 #

• 一定要确保div1和table的box-sizing属性一致，否则就算设置了相同的宽度，视觉上也会有偏差；
• 如果table有margin，记得给div1设置相同的margin，才能完全对齐；
• 如果table是自适应内容宽度的，两个方案都能完美同步它的动态宽度。

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