Bootstrap排版表格打印时分页前出现异常细线问题

嘿，我之前也碰到过类似的打印分页细线问题，结合你的代码结构来看，大概率是不规范的表格布局或者浏览器打印渲染的边界问题导致的，给你几个可行的解决方案：

1. 优先修复HTML结构（最根本的解决方式） #

首先要注意：<tr>是<table>的专属子元素，直接把它放在<div class="col-xs-3">里不符合HTML规范，浏览器在渲染这种非标准结构时很容易出现异常（包括打印时的细线）。

建议调整成符合规范的结构，比如把每个表格放在col容器内：

<div class="row">
  <div class="col-xs-3">
    <table class="table">
      <tr role="row" class="odd">
        <td class="sorting_1">আঃ আজিজ মানিক</td>
        <td>সাধারন সম্পাদক</td>
        <td>ইউনয়িন আওয়ামীলীগ</td>
        <td>০১৯২০৪৮৬০২১</td>
        <td>শাহরাস্তি</td>
        <td>চাঁদপুর</td>
      </tr>
    </table>
  </div>
  <!-- 另外3个col-xs-3容器 -->
</div>

如果你的需求是每行展示4条数据，也可以考虑用纯div布局代替表格，避免混用带来的渲染冲突。

2. 自定义打印CSS消除细线（不改结构的临时方案） #

如果暂时无法调整HTML结构，可以通过打印媒体查询来覆盖默认样式，解决细线问题：

@media print {
  /* 移除row和col可能自带的边框、阴影 */
  .row, .col-xs-3 {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* 可选：消除内边距带来的边界间隙 */
  }

  /* 禁止表格行被分页截断，减少边界渲染异常 */
  tr {
    page-break-inside: avoid;
    border-collapse: collapse !important;
  }

  /* 移除Bootstrap可能添加的伪元素干扰 */
  .col-xs-3::before, .col-xs-3::after {
    content: none !important;
  }

  /* 如果用了Bootstrap的.table类，移除默认的单元格边框 */
  .table > tbody > tr > td {
    border-top: none !important;
  }
}

其中page-break-inside: avoid可以避免表格行在分页处被拆分，从根源减少细线出现的概率；border-collapse: collapse确保表格边框合并，不会产生多余的间隙线。

3. 检查浏览器打印设置 #

有时候细线可能是浏览器打印的“背景图形”或“边框”选项导致的，你可以在打印预览里：

• 关闭“背景图形”选项（部分浏览器默认开启，会渲染元素的背景和边框）
• 调整缩放比例，避免内容刚好卡在分页边界上

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