如何使用css @media print打印时从表中删除边框
E2r*_*abi 4 html css css3 media-queries
你好我尝试从用户单击按钮打印(window.print)时使用css删除我的表格边框,但它始终保持打印页面
这是我的css代码:
@media print{
body * {visibility: hidden;
}
table {
border:solid; white !important;
border-width:1px 0 0 1px !important;
border-bottom-style: none;
}
th, td{
border:solid; white !important;
border-width:0 1px 1px 0 !important;
border-bottom-style: none;
}
}
这个css给了我这个结果:
表的底部边框显示如何删除它谢谢你
您可以在CSS3 @media规则中使用:
border-bottom: none;
要么
border: solid white !important;
使用border-bottom: none;可能会影响打印时表的布局(取决于您是否使用box-sizing默认值).
下面是一个例子:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
table {
/* just an example */
border: solid red;
border-width: 1px 0 0 1px !important;
border-bottom-style: none;
}
@media print {
table {
border: solid white !important;
border-width: 1px 0 0 1px !important;
border-bottom-style: none;
}
th, td {
border: solid white !important;
border-width: 0 1px 1px 0 !important;
border-bottom-style: none;
}
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
最后这个解决方案对我有用：
@media print {
* {
color: #000;
background-color: #fff;
@include box-shadow(none);
@include text-shadow(none);
}
}