如何在打印模式下隐藏表格列？含Bootstrap及JS print()场景

云上老周

2026-5-20

在打印模式下隐藏表格列的解决方案

嘿，我来帮你搞定这个打印时隐藏表格操作列的问题！从你给出的代码看，你已经尝试了Bootstrap的hidden-print类，但可能因为版本或者样式优先级问题没生效，下面给你几个靠谱的解决方案：

1. 匹配正确的Bootstrap版本类

如果你用的是Bootstrap 4或5，旧的hidden-print类已经被官方弃用了，推荐使用专门的打印控制类d-print-none，它能精准控制元素在打印时隐藏：

<table class="table table-striped">
  <thead>
    <tr>
      <th>No</th>
      <th>Name</th>
      <th class="d-print-none">Operation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Smith</td>
      <td class="d-print-none">编辑/删除</td>
    </tr>
    <!-- 更多表格行... -->
  </tbody>
</table>

如果是Bootstrap 3，hidden-print本身是正确的，但如果还是没生效，大概率是其他CSS规则覆盖了它的样式，这时候可以试试下面的自定义样式方案。

2. 自定义打印媒体查询样式

不管你用哪个Bootstrap版本，自定义打印样式都是最稳妥的方式，优先级更高，不会被其他样式干扰。你可以在页面的<style>标签里添加这段CSS：

@media print {
  /* 自定义类，强制在打印时隐藏元素 */
  .print-hidden {
    display: none !important;
  }
}

然后把这个类加到需要隐藏的表头和所有对应单元格上：

<table class="table table-striped">
  <thead>
    <tr>
      <th>No</th>
      <th>Name</th>
      <th class="print-hidden">Operation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Smith</td>
      <td class="print-hidden">编辑/删除</td>
    </tr>
  </tbody>
</table>