如何创建尺寸大于body元素且在body中居中的表格？

你遇到的宽度限制是绝对定位元素的默认尺寸计算规则导致的：当绝对定位元素仅设置left、top偏移，未明确指定宽度规则时，元素的可用宽度会被默认限制为「包含块宽度 - 左偏移值」。你设置了left: 50%，所以#one的最大宽度默认就是body宽度的50%；高度没有这个问题是因为默认情况下body高度由内容撑开，没有固定高度限制，所以不会触发该规则。

方案1：修复原有绝对定位逻辑 #

只需给#one添加width: fit-content规则，让容器宽度完全由内部内容决定，不受偏移量限制即可，完整CSS如下：

/* 先配置body作为定位包含块，清除默认边距 */
body {
  position: relative;
  margin: 0;
  /* 可选：如果需要body占满整个视口，添加下面两行 */
  min-width: 100vw;
  min-height: 100vh;
}

#one {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 新增此行解除宽度限制 */
  width: fit-content;
}

/* 可选：给表格添加规则避免内容被强制压缩折行，保证表格尺寸符合预期 */
table {
  table-layout: auto;
  /* 如果不需要强制内容不折行可删除下一行 */
  white-space: nowrap;
  border-collapse: collapse;
}

方案2：使用Grid布局实现（更简单） #

不需要使用绝对定位，直接通过Grid的居中规则即可天然支持内容超出容器时的居中展示，逻辑更简洁：

body {
  margin: 0;
  min-width: 100vw;
  min-height: 100vh;
  /* 开启grid布局，直接将子元素水平垂直居中 */
  display: grid;
  place-items: center;
}
/* #one不需要添加任何定位相关属性 */

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