如何打印超宽HTML表格？Bootstrap3页面打印截断问题求解

针对你用Bootstrap 3构建的超宽表格（如365天独立列）打印/导出PDF时右侧内容被截断的问题，可通过以下几种实用方案解决：

1. 强制打印为横向布局，释放宽度空间 #

浏览器默认纵向打印的宽度有限，改成横向能大幅提升可用宽度，同时取消Bootstrap容器的宽度限制：

@media print {
  /* 强制打印页面为横向，可调整边距避免内容裁切 */
  @page {
    size: landscape;
    margin: 1cm;
  }
  /* 取消Bootstrap容器的最大宽度限制，让表格撑满打印宽度 */
  .container {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  /* 让表格响应式容器不限制宽度，允许完整显示表格 */
  .table-responsive {
    overflow-x: visible !important;
    width: auto !important;
  }
}

2. 让表格自动横向分页（多页承载宽内容） #

如果横向布局仍放不下所有列，可设置表格允许在打印时自动拆分到多页，每一页承载部分列：

@media print {
  /* 取消容器宽度限制 */
  .container {
    width: auto !important;
    max-width: none !important;
  }
  /* 表格根据内容自动调整宽度，避免行被拆分到两页 */
  table {
    width: max-content !important;
    page-break-inside: avoid;
  }
  /* 表格容器不隐藏溢出内容，让打印引擎识别完整宽度 */
  .table-container {
    overflow-x: visible !important;
    width: 100%;
  }
}

若遇到浏览器兼容性问题，可尝试给表格列设置固定宽度（如td { width: 50px; }），确保打印引擎能识别表格总宽度。

3. 手动拆分表格为多组列 #

如果上述方法仍无法满足需求，可将超宽表格拆分为多个子表格（比如每30列一组），每组后添加分页标记：

<!-- 第一组表格 -->
<table class="table">
  <!-- 前30列内容 -->
</table>
<!-- 强制分页 -->
<div style="page-break-after: always;"></div>
<!-- 第二组表格 -->
<table class="table">
  <!-- 接下来30列内容 -->
</table>

也可以用JavaScript动态拆分表格，根据列数自动分组，减少重复代码工作量。

4. 覆盖Bootstrap的打印默认样式 #

Bootstrap 3的打印样式可能会强制背景色、文字颜色或限制元素宽度，可针对性覆盖：

@media print {
  /* 取消Bootstrap打印时的文字阴影、背景色限制 */
  * {
    text-shadow: none !important;
    background: transparent !important;
  }
  /* 确保表格边框在打印时正常显示 */
  table, th, td {
    border: 1px solid #000 !important;
  }
}

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