解決table邊框在打印中不顯示的問題

先了解一下，table邊框如何設置

一、只對表格table標簽設置邊框

只對table標簽設置border（邊框）樣式，將讓此表格最外層table一個邊框，而表格內部不產生邊框樣式。

CSS代碼：

.table-a table{border:1px solid #F00}

 

HTML代碼：

<div class="table-a">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="105">站名</td>
<td width="181">網址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>web前端開發</td>
<td>www.zjgsq.com</td>
<td>web前端學習之路</td>
</tr>
<tr>
<td>web前端開發</td>
<td>www.zjgsq.com</td>
<td>web前端學習之路</td>
</tr>
</tbody>
</table>
</div>

 

二、對td設置邊框

對table表格td設置邊框樣式，表格對象內td將實現邊框樣式，但中間部分td會導致出現雙邊框。

CSS代碼：

.table-b table td{border:1px solid #F00}

 

HTML代碼：

<div class="table-b">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="105">站名</td>
<td width="181">網址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>web前端開發</td>
<td>www.zjgsq.com</td>
<td>web前端學習之路</td>
</tr>
<tr>
<td>web前端開發</td>
<td>www.zjgsq.com</td>
<td>web前端學習之路</td>
</tr>
</tbody>
</table>
</div>

 

三、對table和td設置背景，實現表格邊框

先設置table css背景為紅色, 再設置table單元之間間距為1。
此方法在web中顯示表格邊框雖然不錯，但是在打印時表格的邊框就沒有了，因為一般默認chrome也好，IE也好，打印默認設置都是不顯示背景顏色和圖片的，需要自己手動設置顯示，不是每個打印網頁的人都知道如何去設置顯示背景顏色和圖片，所以我們要用到方法四

CSS代碼：

.table-c table{ background:#F00}
.table-c table td{ background:#FFF}

 

HTML代碼：

<div class="table-c">
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td width="105">站名</td>
<td width="181">網址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>web前端開發</td>
<td>www.zjgsq.com</td>
<td>web前端學習之路</td>
</tr>
<tr>
<td>web前端開發</td>
<td>www.zjgsq.com</td>
<td>web前端學習之路</td>
</tr>
</tbody>
</table>
</div>

 

四、完美表格邊框

對table與td 分別設置1像素的邊框，再對邊框進行合並，此方法無論在web或打印都能顯示出來

CSS代碼：

.table-d table{border:1px solid #F00;border-collapse: collapse}
.table-d table td{border:1px solid #F00;}

 

HTML代碼：

<div class="table-d">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="105">站名</td>
<td width="181">網址</td>
<td width="112">說明</td>
</tr>
<tr>
<td>web前端開發</td>
<td>www.zjgsq.com</td>
<td>web前端學習之路</td>
</tr>
<tr>
<td>web前端開發</td>
<td>www.zjgsq.com</td>
<td>web前端學習之路</td>
</tr>
</tbody>
</table>
</div>

 

轉載自：http://www.w3cways.com/1493.html

 

程序員的基礎教程：菜鳥程序員