html - CSS 页面边框在打印预览页面中不起作用

标签 html css media-queries

我想为我的 html 可打印页面设置页面边框。当我们在浏览器 View 中看到边框正常工作时。仅检查打印预览页面的主要问题。 

@media print {
        @page {  
            size:200mm 297mm; 
            margin: 0.5mm;
        } 

        body {
            border: 1px solid #000;
            margin: 3mm;
        }
    }

我试过@media print代码。任何人都可以帮助我实现这一目标。

table {position:relative;width: 100%;}
	.kprj-left {width: 160px;position: absolute;right: 0;bottom: 270px;}
	.kprj-right {max-width: 100px;position: absolute;left: 0;top: 90px;}
	body {
		background: rgb(204,204,204); 	
		margin:10px auto;
	}
	p {
		font-size:17px;
	}
	@media screen {
	
		body {
			width: 210mm;
			/*height:297mm;*/
			margin: 20px auto;
			position: relative;
			border: 1px solid #000;
		}
		.tablebr {
			box-shadow: 0 7px 14px 0 rgba(50,50,93,0.10), 0 3px 6px 0 rgba(0,0,0,0.07);
		}
		@page {  
			size:210mm 297mm;  
			margin:0.5in;
		} 
		.bg-blackwh {background:#000;color:#fff;}
	}
	@media print {
		@page {  
			size:200mm 297mm; 
		} 
    body {
			border: 1px solid #000;
			margin: 3mm;
		}
		.page-break { 
        height:2px; 
        border-top:1px solid #999; 
        margin-bottom:13px;
        page-break-after: always;  
    }
		.setbr {
			border: 1px solid #000;
		}
		body,html {
			box-shadow: 0;
			width:100%;
			max-width:100%;	
			position: relative;
		}
		
		table {
			width:100%;
			max-width:100%;
			box-shadow: none;
			border:0;
		}
		.bg-blackwh {font-size:15px;}
	}
<table style="position:relative;background-color:#fff;padding:60px;" class="">
  <tbody>
        <thead>			
			<tr>
                <th style="text-align:center;" colspan="2">
					<img src="http://orderonline.my/email/kprj-right.png" alt="kprj-right" style="max-width: 100px;position: absolute;left: 0;top: 90px;" class="kprj-left">
				</th>
            </tr>
            <tr>
                <th style="text-align:center;" colspan="2">
                    <img alt="kprj-logo" src="http://orderonline.my/email/kprj-logo.png" style="display: block;border: 0;line-height: 100%;max-width: 280px;margin: 0 auto;">
                </th>
            </tr>
            <tr>
                <td style="height:30px;"></td>
            </tr>
            <tr>
                <th style="text-align:center;" colspan="2">
                    <h3 style="margin: 0 0 0;padding: 0 0;font-size: 32px;font-weight: 300;letter-spacing: 1px;">PERAKUAN PENDAFTARAN</h3>
                </th>
            </tr>
            <tr>
                <td style="height:30px;"></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="text-align:center;" colspan="2">
                    <p style="margin: 0 0 0;padding: 0 0;font-weight: 300;">No Pendaftaran</p>
                    <p style="padding: 0 0 0;margin: 0 0 0;font-style: italic;"><strong>K-BG70377</strong></p>
                </td>
            </tr>
            <tr>
                <td style="height:30px;"></td>
            </tr>
            <tr>
                <td style="text-align:center;" colspan="2">
                    <p style="margin: 0 0 0;padding: 0 0;font-weight: 300;">Adalah disahkan
                        <br>Syarikat/Firma berikut telah didaftarkan sebagai:-</p>
                </td>
            </tr>
            <tr>
                <td style="height:40px;"></td>
            </tr>
            <tr>
                <td style="text-align:center;" colspan="2">
                    <p style="margin: 0 0 0;padding: 0 0;font-style: italic;text-decoration: underline;font-size: 22px;"><strong>KONTRAKTOR</strong></p>
                </td>
            </tr>
            <tr>
                <td style="height:20px;"></td>
            </tr>
            <tr>
                <td style="text-align:center;" colspan="2">
                    <p style="margin: 0 0 0;padding: 0 0;font-weight: 300;">dengan KUMPULAN PRASARANA RAKYAT JOHOR SDN BHD dan/atau anak-anak syarikatnya dengan tertakluk kepada terma dan syarat yang ditetapkan</p>
                </td>
            </tr>
            <tr>
                <td style="height:20px;"></td>
            </tr>
            <tr>
                <td style="text-align:center;" colspan="2">
                    <p style="margin: 0 0 0;padding: 0 0;font-weight: 300;">Tempoh sahlaku pendaftaran ini bermula dari</p>
                </td>
            </tr>
            <tr>
                <td style="height:20px;"></td>
            </tr>
            <tr>
                <td style="text-align:center;" colspan="2">
                    <p style="padding: 0 0 0;margin: 0 0 0;font-style: italic;"><strong>10hb APRIL 2018</strong> hingga <strong>09hb APRIL 2020</strong></p>
                </td>
            </tr>
            <tr>
                <td style="height:40px;"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <table style="max-width:400px;">
                        <tr>
                            <td style="vertical-align:top;">
                                <p style="line-height: 30px;margin: 0 0 0;padding: 0 0;font-size: 18px;">Nama</p>
                            </td>
                            <td style="vertical-align:top;line-height: 30px;font-size: 18px;">:</td>
                            <td style="vertical-align:top;line-height: 30px;">
                                <p style="border-bottom: 1px solid #000;padding: 0 0 0;margin: 0 0 0;font-style: italic;line-height: 30px;font-size: 18px;"><strong>VECTOR INFOTECH SDN. BHD.</strong></p>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:top;">
                                <p style="line-height: 30px;margin: 0 0 0;padding: 0 0;font-size: 18px;">Alamat</p>
                            </td>
                            <td style="vertical-align:top;line-height: 30px;font-size: 18px;">:</td>
                            <td style="vertical-align:top;">
                                <p style="border-bottom: 1px solid #000;padding: 0 0 0;margin: 0 0 0;font-style: italic;line-height: 30px;font-size: 18px;"><strong>NO. 37, JALAN 4/93,</strong></p>
                                <p style="border-bottom: 1px solid #000;padding: 0 0 0;margin: 0 0 0;font-style: italic;line-height: 30px;font-size: 18px;"><strong>TAMAN MIHARJA,</strong></p>
                                <p style="border-bottom: 1px solid #000;padding: 0 0 0;margin: 0 0 0;font-style: italic;line-height: 30px;font-size: 18px;"><strong>OFF JALAN LOKE YEW,</strong></p>
                                <p style="border-bottom: 1px solid #000;padding: 0 0 0;margin: 0 0 0;font-style: italic;line-height: 30px;font-size: 18px;"><strong>55200 KUALA LUMPUR.</strong></p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="height:80px;"></td>
            </tr>
            <tr>
                <td style="text-align:center;" colspan="2">
                    <p style="padding: 0 0 0;width: 350px;border-bottom: 1px dotted #000;letter-spacing: 0px;margin: 0 auto;"></p>
                </td>
            </tr>
            <tr>
                <td style="height:20px;"></td>
            </tr>
            <tr>
                <td style="text-align:center;" colspan="2">
                    <p style="padding: 0 0 0;margin:0 0 0;font-style:italic;"><strong>(HAJI MOHD NOORAZAM B. DATO&#39; OSMAN)</strong></p>
                    <p style="margin: 0 0 0;padding: 0 0;font-weight: 300;">Ketua Pengarah Eksekutif</p>
                </td>
            </tr>
            <tr>
                <td style="height:10px;"></td>
            </tr>
			<tr>
                <td>
					<img src="http://orderonline.my/email/kprj-left.png" alt="kprj-left" class="kprj-left" style="width: 160px;position: absolute;right: 0;bottom: 270px;">
				</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td style="text-align:left;" colspan="2">
                    <table>
                        <tr>
                            <td style="vertical-align:top;">
                                <p style="margin: 0 0 0;padding: 0 0;font-weight: 300;font-style:italic;font-size:13px;">Nota:</p>
                            </td>
                            <td style="vertical-align:top;">
                                <p style="margin: 0 0 0;padding: 0 0;font-weight: 300;font-style:italic;font-size:13px;">Pembaharuan pendaftaran perlu dibuat selewat-lewatnya satu (1) bulan sebelum tamat sahlaku pendaftaran.</p>
                            </td>
                        </tr>
						<tr>
							<td style="height:10px;"></td>
						</tr>
						<tr>
                            <td style="vertical-align:top;" colspan="2">
                                <p style="margin: 0 0 0;padding: 0 0;font-weight: 300;color:#fff;background:#000;" class="bg-blackwh">G-07 & G-08 Blok 4 Danga Bay, Jalan Skudai, 80200 Johor Bahru, Johor Darul Takzim. Tel: 07-2358377; Fax: 07-2359377</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

最佳答案

你的 css 代码中有错误，因为打印 css 工作正常我已经检查了我这边只是找出你的 css 样式中的 css 错误。

body{border: 1px solid #000}
	@media print {
        @page {  
            size:200mm 297mm; 
            margin: 0.5mm;
        } 

        body {
            border: 1px solid #000;
            margin: 3mm;
        }
    }
<table style="position:relative;background-color:#fff;padding:60px;" class="">
<tbody>
<tbody>
<tr>
<td style="text-align:center;" colspan="2">
<p style="margin: 0 0 0;padding: 0 0;font-weight: 300;">No Pendaftaran</p>
<p style="padding: 0 0 0;margin: 0 0 0;font-style: italic;"><strong>K-BG70377</strong></p>
</td>
</tr>
<tr>
<td style="height:30px;"></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2">
<p style="margin: 0 0 0;padding: 0 0;font-weight: 300;">Adalah disahkan
<br>Syarikat/Firma berikut telah didaftarkan sebagai:-</p>
</td>
</tr>
<tr>
<td style="height:40px;"></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2">
<p style="margin: 0 0 0;padding: 0 0;font-style: italic;text-decoration: underline;font-size: 22px;"><strong>KONTRAKTOR</strong></p>
</td>
</tr>
<tr>
<td style="height:20px;"></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2">
<p style="margin: 0 0 0;padding: 0 0;font-weight: 300;">dengan KUMPULAN PRASARANA RAKYAT JOHOR SDN BHD dan/atau anak-anak syarikatnya dengan tertakluk kepada terma dan syarat yang ditetapkan</p>
</td>
</tr>
</tbody>
</table>

关于html - CSS 页面边框在打印预览页面中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54781577/

上一篇：css - 将子 block 元素限制为父框固定边界？

下一篇：css - 为什么 flex-item 的 z-index 不能在 Safari 中使用 'overflow: hidden'？

相关文章：

html - 为什么我的智能手机不能播放视频？

php - 很简单的mod_rewrite问题

css - 线性渐变在 Chrome 中不起作用

html - 以较小的尺寸查看时，高质量的主图会变得模糊

css - Sass 媒体查询的加载顺序作为部分

Javascript - 悬停时 Bootstrap 下拉菜单打开子菜单的所有菜单级别

javascript - 自动填充的输入在 Shiny 中未读取

CSS 不工作？

css - 如何使用 CSS 覆盖各种浏览器的打印首选项？

javascript - 切换纵向-横向-纵向后丢失媒体查询匹配

©2024 IT工具网  联系我们