嵌套CSS Grid放入HTML table后出现水平溢出，请求协助

HTML table 和 CSS Grid 是两套完全独立的布局系统，核心冲突点在于：

• Table 使用表格布局算法，默认以table-layout: auto模式根据单元格内容自动计算宽度，不会主动继承内部 Grid 的固定宽度设置。
• 当 Grid 被嵌套在<td>中时，单元格默认overflow: visible，不会限制内部元素的宽度，导致固定宽度的 Grid 直接超出 table 边界，触发水平溢出。

方案1：强制Table与Grid宽度匹配 #

既然你的 Grid 列宽是固定值（比如7列总宽700px），直接给 table 锁定宽度并禁用自动布局：

.invoice-table {
  width: 700px; /* 与Grid总宽度完全一致 */
  table-layout: fixed; /* 强制使用固定布局，忽略内容自动撑开 */
  border-collapse: collapse;
}

.invoice-table td {
  width: 100%;
  overflow: hidden; /* 防止内部Grid超出单元格 */
}

方案2：用纯Grid模拟Table表头重复（替代Table） #

如果 table 的布局冲突难以调和，可以用 CSS Grid 原生实现多页发票的表头重复，借助打印CSS和粘性定位：

/* 外层Grid容器，与原布局列数/宽度一致 */
.invoice-container {
  display: grid;
  grid-template-columns: repeat(7, 100px);
}

/* 表头设置粘性，分页时自动固定在页首 */
.invoice-header {
  position: sticky;
  top: 0;
  page-break-after: avoid; /* 打印时避免表头被拆分到两页 */
  background: #fff; /* 覆盖下方内容，避免透显 */
}

/* 嵌套Grid的行，跨满所有列 */
.invoice-nested-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
}

/* 打印分页优化 */
@media print {
  .invoice-row {
    page-break-inside: avoid; /* 避免单条记录被拆分到两页 */
  }
}

方案3：给Table列手动设置匹配宽度 #

如果必须保留 table，直接给每一列设置与 Grid 对应的固定宽度：

<table class="invoice-table">
  <thead>
    <tr>
      <th style="width: 100px">列1</th>
      <th style="width: 100px">列2</th>
      <!-- 剩余5列依次设置对应固定宽度 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="7">
        <div class="nested-grid">
          <!-- 嵌套Grid内容 -->
        </div>
      </td>
    </tr>
  </tbody>
</table>

同时让嵌套Grid自适应单元格宽度：

.nested-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%; /* 强制继承单元格宽度 */
}

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