使用绝对定位居中表格时table变窄无法占满视口宽度如何解决

表格异常变窄、长文本不必要折行的核心逻辑有两点：

• 绝对定位的.center-box容器未设置明确宽度，绝对定位元素默认会收缩适配内容宽度，直接限制了内部表格的最大可用宽度
• 内部table元素未设置占满父容器宽度，会被父容器的收缩规则影响，无法撑到预期的视口宽度

方案1：保留绝对定位居中逻辑 #

仅需补充宽度相关配置即可，修改后的CSS如下：

.center-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 新增配置：宽度占满整个视口 */
  width: 100%;
  box-sizing: border-box;
  /* 如有需要可自定义左右内边距，不会撑爆宽度 */
  /* padding: 0 24px; */
}
/* 新增配置：表格占满父容器全部宽度 */
.center-box table {
  width: 100%;
}

方案2：flex布局居中的正确写法 #

之前尝试flex布局未生效是因为未给父容器设置明确高度，导致垂直居中规则失效，完整CSS如下：

/* 给根元素设置高度，为flex居中提供布局基础 */
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
}
.center-box {
  width: 100%;
  box-sizing: border-box;
}
.center-box table {
  width: 100%;
}

如果需要强制单元格内文本不折行，可以额外给td添加white-space: nowrap配置。

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