细线表格能打印

最新推荐文章于 2021-06-03 08:05:14 发布

原创最新推荐文章于 2021-06-03 08:05:14 发布 · 128 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种在网页中创建细线表格的方法，并解决了该表格在打印时无法正常显示边框的问题。通过调整CSS样式，使得打印出来的表格拥有清晰可见的1px边框。

细线表格做起来很简单

<table   width= "100% "   border= "0 "   cellspacing= "1 "   bordercolor= "#CCCCCC "   bgcolor= "#000000 "> 
    <tr   bgcolor= "#FFFFFF ">   
        <td> &nbsp; </td> 
        <td> &nbsp; </td> 
        <td> &nbsp; </td> 
    </tr> 
    <tr   bgcolor= "#FFFFFF ">   
        <td> &nbsp; </td> 
        <td> &nbsp; </td> 
        <td> &nbsp; </td> 
    </tr> 
    <tr   bgcolor= "#FFFFFF ">   
        <td> &nbsp; </td> 
        <td> &nbsp; </td> 
        <td> &nbsp; </td> 
    </tr> 
</table>

但是这种细线表格在打印的时候是不能显示边框的，即无边框。如果设置border="1"，打印出来的实际是2px，比较粗。

如果要打印，需要如下设置：

css：

<style>
   
   
.tabPrint td    
{    
    border-left:#000000 solid 1px;    
    border-top:#000000 solid 1px;    
    height:21px;    
}    
   
table.tabPrint    
{    
    border-right:#000000 solid 1px;    
    border-bottom:#000000 solid 1px;    
}    
   



</style>

body：

<table class='tabPrint' align="center" width="95%" cellSpacing="0" cellPadding="0" border="0"
ID="Table2">
<thead style="display:table-header-group;font-weight:bold" mce_style="display:table-header-group;font-weight:bold">
<tr align="center">
<td rowspan="2">所属街道</td>
<td rowspan="2">标题</td>
<td rowspan="2">录入日期</td>
<td colspan="2">国家级</td>
<td colspan="1">市级</td>
</tr>
<tr align="center">
<td>人民日报</td>
<td>解放日报</td>
<td>新民晚报</td>
</tr>
</thead>
<tr align="center">
<td>浦东新区浦三街道</td>
<td>测试</td>
<td>02-24-2009</td>
<td>√</td>
<td>√</td>
<td>√</td>
</tr>
<tr align="center">
<td>浦东新区浦三街道</td>
<td>sseref</td>
<td>02-24-2009</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr align="center">
<td>浦东新区浦三街道</td>
<td>sseref</td>
<td>02-24-2009</td>
<td> </td>
<td> </td>
<td> </td>
</tr>

</table>

html 换行用<br/>，title提示用