使用Bootstrap构建可打印报表：grid系统表格并排显示问题求助

我来帮你搞定这个打印报表的难题！你遇到的核心问题是Bootstrap默认的打印样式会重置网格列的行为，导致原本并排的列在打印时变成垂直堆叠。下面是具体的排查和解决步骤：

1. 先搞懂Bootstrap打印样式的默认行为 #

Bootstrap的默认@media print规则里，会把.col类的元素设置为width: 100%、float: none，这就直接让你的两列表格变成上下排列了。所以我们需要在自定义的打印样式里覆盖这个默认行为。

2. 自定义打印样式实现并排布局 #

给你的行元素加一个自定义类（比如print-row），然后在打印媒体查询里用flex布局强制两列并排：

/* 自定义打印样式 */
@media print {
  /* 强制行使用flex布局，禁止换行 */
  .print-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
  }
  /* 让两列平分宽度 */
  .print-row .col {
    flex: 1 !important;
    max-width: 50% !important;
    padding: 0 8px !important; /* 给表格留点边距 */
  }
  /* 确保表格在列内正常显示，避免溢出 */
  table {
    width: 100% !important;
    table-layout: fixed !important; /* 固定表格布局，防止内容撑破容器 */
    font-size: 12px !important; /* 缩小字体适配打印宽度 */
  }
  /* 移除页面默认边距，避免内容被截断 */
  body {
    padding: 0 !important;
    margin: 0 !important;
  }
}

对应的HTML结构，给包裹表格的行加上print-row类：

<div class="container">
  <div class="row print-row">
    <div class="col">
      <table class="table table-bordered">
        <!-- 第一个表格内容 -->
      </table>
    </div>
    <div class="col">
      <table class="table table-bordered">
        <!-- 第二个表格内容 -->
      </table>
    </div>
  </div>
</div>

3. 额外优化：设置打印页面属性 #

为了让打印效果更规整，你可以添加@page规则来定义页面尺寸和边距：

@page {
  size: A4; /* 设置纸张尺寸 */
  margin: 1cm; /* 设置页面边距 */
}

4. 测试小技巧 #

• 打印前先在浏览器的开发者工具里切换到「打印预览」模式（快捷键Ctrl+P），实时调整样式
• 如果表格内容还是溢出，可以给表格的列设置固定宽度，比如给<th>或<td>加width: 25%这样的属性

这样调整后，你的两个表格应该就能在打印预览和实际打印中保持并排显示了！

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