打印时删除表格边框线

时间:2014-10-16 06:22:09

标签: javascript html css printing

我已经创建了一个用于打印html表的应用程序,打印应用程序工作正常,但问题是该表的设计方式是使用css应用边框线(我无法修改任何样式的东西,因为它是由其他团队完成的),所以当我触发打印选项时,css没有被应用。

我的代码如下所示

任何人都可以告诉我一些解决方案。

Working Demo

HTML

<table id="printTable">
    <tbody><tr>
        <th>Actions</th>
        <th>First Name</th>
        <th>Last Name</th>      
        <th>Points</th>
    </tr>
    <tr>
        <td>Add/ Remove</td>
        <td>Jill</td>
        <td>Smith</td>      
        <td>50</td>
    </tr>
    <tr>
        <td>Add/ Remove</td>
        <td>Eve</td>
        <td>Jackson</td>        
        <td>94</td>
    </tr>
    <tr>
        <td>Add/ Remove</td>
        <td>John</td>
        <td>Doe</td>        
        <td>80</td>
    </tr>
    <tr>
        <td>Add/ Remove</td>
        <td>Adam</td>
        <td>Johnson</td>        
        <td>67</td>
    </tr>
</tbody></table>

<br />
<br />

<button>Print me</button>

脚本

function printData()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})

3 个答案:

答案 0 :(得分:2)

试试这个

<table id="printTable" border="1" rules="all">

答案 1 :(得分:0)

您正在新窗口中创建新文档,但不包括任何样式表,因此将根据浏览器默认值显示和打印内容。您需要在新文档中直接包含style元素(或style属性)中的相关样式表,或通过link元素间接包含相关样式表。

答案 2 :(得分:0)

Okkay ..谢谢你的回复......

你必须在

之后使用STYLE
<table id="printTable">

喜欢这个SEE HERE

或者您可以将样式表放在另一个.css文件中,然后在

之后包含它们
    <table id="printTable">

我认为它会为你工作