chrome 打印 table border 边框已经隐藏,打印仍显示?

Question

chrome 打印 table border边框 已经隐藏,打印仍显示?

<table class="table table-responsive table-bordered noticeTable" border="0" cellpadding="0" cellspacing="0">
        <tbody>
        <tr>
          <td class="tableWidth20">编号</td>
          <td class="tableWidth20"></td>
          <td rowspan="2" class="tableWidth20 vertical">地点</td>
          <td class="tableWidth20"></td>
          <td class="tableWidth20"></td>
        </tr>
        <tr>
          <td>名称</td>
          <td></td>
          <td>地名</td>
          <td></td>
        </tr>
        <tr>
          <td>所属</td>
          <td colspan="2"></td>
          <td>所属</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="5" class="alignLeft noBottomBorder">整改建议:</td>
        </tr>
        <tr>
          <td colspan="5" class="height36 noTopBorder noBottomBorder"></td>
        </tr>
        <tr>
          <td colspan="5" class="height36 noTopBorder noBottomBorder"></td>
        </tr>
        <tr>
          <td colspan="5" class="noTopBorder noBottomBorder">请务必于______年_____月_____日以前将整改结果上报。</td>
        </tr>
        </tbody>
      </table>

 .tableWidth20 {
        width: 20%;
      }
    .noTopBorder {
      border-top: none;
    }
    .noBottomBorder {
      border-bottom: none;
    }
    .vertical {
      vertical-align: middle;
    }

页面效果如下:

用js原生print方法打印,或页面右键打印
打印效果如下:

最后一个大表格中的横线在页面中已经用border:none;隐藏掉,但是打印仍然出现,试了很多种办法,目前没找到解决办法.

• 有知道原因的或解决方案的,请告知,不胜感激 *

Answer 1

@media print {
    table {
        /* 在这里定义你表格相关的打印样式即可 */
    }
}

你的页面展示效果和打印可以定义为完全不同的样式，比如这样：

@media print {
    table: {
        background-color: pink;
        color: orange;
        border: 3px double black;
    }
}
table {
    background-color: green;
    color: yellow;
    border: 3px solid purple;
}

放一下对比图：

一些细节参考这个： https://segmentfault.com/a/11...

以及 MDN：https://developer.mozilla.org...