如何在inline-grid中实现分页不拆分边框，仅在网格行间分页？

要实现网格行之间的分页、避免边框拆分，可以通过调整HTML结构和CSS打印规则来解决，具体步骤如下：

1. 调整HTML结构 #

将每一行的网格单元格包裹在独立的行容器中，确保每一行是一个完整的块级单元：

<div id="print_rx_section">
  <!-- 第一行 -->
  <div class="rx-row">
    <div>列1</div>
    <div>列2</div>
    <div>列3</div>
    <div>列4</div>
    <div>列5</div>
    <div>列6</div>
    <div>列7</div>
  </div>
  <!-- 第二行 -->
  <div class="rx-row">
    <div>列1</div>
    <div>列2</div>
    <!-- 更多列... -->
  </div>
</div>

2. 修改打印媒体查询CSS #

更新你的@media print规则，针对行容器设置分页保护，同时调整网格布局结构：

@media print {
    body {
        background-color: white;
        color: black;
        height: 11in;
        width: 8.5in;
        padding: 0.25in;
        margin: 0;
        font-size: 10pt;
    }

    #print_rx_section {
        display: grid;
        justify-content: center;
        align-content: start; /* 改为顶部对齐，避免内容居中导致分页异常 */
        border: 2px solid black;
        border-collapse: collapse;
        /* 移除强制分页，按需保留 */
        /* page-break-after: always; */
    }

    /* 每一行作为独立网格容器 */
    .rx-row {
        display: grid;
        grid-template-columns: repeat(7, auto); /* 对应原来的7列 */
        page-break-inside: avoid; /* 禁止行内分页，确保整行在同一页 */
        page-break-after: auto; /* 仅当行超出页面时才在后面分页 */
    }

    /* 单元格样式继承原规则 */
    .rx-row > div {
        display: inline-grid;
        align-items: center;
        justify-items: center;
        border: 1px solid black;
        border-collapse: collapse;
        padding: 10px;
        text-align: center;
    }
}

关键说明 #

• page-break-inside: avoid：当前Chrome、Firefox、Edge等主流浏览器已稳定支持该属性，能强制整行不被拆分到两页，确保边框完整。
• 行容器结构：通过将每一行封装为独立容器，让浏览器能准确识别分页边界，避免直接在网格单元格上设置分页规则的无效问题。
• 布局调整：将align-content改为start，避免内容居中导致的页面空间浪费，确保分页逻辑更符合预期。

额外注意事项 #

• 测试不同浏览器的打印效果，部分浏览器可能需要调整行高、内边距，避免单一行高度超过页面剩余空间。
• 如果需要强制在某个行后分页，可以给对应.rx-row添加page-break-after: always样式。

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