如何让window.print()打印的HTML表格显示完整边框？

浏览器打印模式下默认会忽略部分网页CSS样式，导致表格在网页显示正常，但打印时丢失行间分隔线和底部边框。只需添加打印专用的CSS规则，强制表格渲染边框即可：

具体实现 #

在HTML页面的<style>标签中添加以下打印样式：

@media print {
  /* 强制表格、表头、单元格显示边框 */
  .table, .table th, .table td {
    border: 1px solid #000 !important;
    border-collapse: collapse !important;
  }
  /* 确保表格底部边框显示 */
  .table {
    border-bottom: 1px solid #000 !important;
  }
}

说明 #

• @media print 是CSS的打印媒体查询，仅在打印时生效，不影响网页正常显示
• !important 用于强制覆盖可能存在的样式优先级问题，确保打印样式生效
• border-collapse: collapse 让单元格边框合并，避免出现重复线条，保证行间分隔线清晰

设置完成后，调用window.print()打印时，表格的行间分隔线和底部边框即可正常显示。

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