如何用纯CSS让inline-block的#wrapper内的.table填满宽度并等列？

没问题！这种被外层元素限制住的情况确实有点头疼，但纯CSS完全能解决，我给你两个实用的方案，你可以根据自己的场景选：

方案一：利用视口宽度+calc偏移（最通用） #

这个方案不需要修改#wrapper的定位属性，直接针对表格做调整就能让它填满整个屏幕：

.table {
  /* 让表格占满整个视口宽度 */
  width: 100vw;
  /* 关键：向左偏移，让表格中心和视口中心对齐，抵消#wrapper的inline-block留白 */
  margin-left: calc(-50vw + 50%);
  /* 强制表格按设置的宽度布局，确保单元格均分 */
  table-layout: fixed;
  border-collapse: collapse;
}

.table td {
  /* 两个单元格各占一半宽度 */
  width: 50%;
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
}

如果页面出现横向滚动条，只需要给body加一句overflow-x: hidden就能解决。

方案二：绝对定位（适合#wrapper无定位的场景） #

如果#wrapper原本没有设置position属性，我们可以通过CSS给它加上相对定位，再让表格绝对定位来撑满屏幕：

/* 给#wrapper设置相对定位，作为表格绝对定位的参考 */
#wrapper {
  position: relative;
}

.table {
  /* 绝对定位让表格突破#wrapper的宽度限制 */
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.table td {
  width: 50%;
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
}

⚠️ 注意：这个方案会让表格脱离文档流，可能导致#wrapper高度塌陷，你可以给#wrapper设置min-height（值等于表格的高度）来避免这个问题。

这两个方案都不需要修改HTML结构，也不用JS，完全符合你的要求～

内容的提问来源于stack exchange，提问作者Neigyl R. Noval