2016-08-26 2 views
1

Firefox를 사용하면서 표시되는 테이블을 깨끗하게 인쇄하려고합니다. 여기 내 코드가있다.인쇄 할 때 html table theadad가 끊어짐

<style type="text/css"> 
table { 
font-family: arial, sans-serif; 
border-collapse: collapse; 
width: 100%; 
} 

td, th { 
border: 1px solid #dddddd; 
text-align: left; 
padding: 8px; 
} 

tr:nth-child(even) { 
background-color: #eee; 
} 

@media print { 
@page { margin: 0; } 
body { margin: 1.6cm; } 
} 

@media print { 
a[href]:after { 
content: none !important; 
    } 
} 
</style> 
<body> 
<div> 
<table class="header"> 
<thead> 
<TR> 
    <TH>x</TH> 
</TR> 
</thead> 
<TR> 
    <TD>x</TD> 
</TR> 

더 많은 행과 열이 제 코드에 있지만 더 이상 포함되지 않습니다. <thead>은 Firefox에서 제대로 작동하지만 인쇄하려면 페이지 상단 가까이에 있기 때문에 행이 프린터에 의해 약간 잘립니다. 패딩을 추가하여 프린터에서 잘리지 않도록하려면 어떻게합니까? 여기

난 그냥 스크린 샷을 복용하고 문서 편집기 등의 이미지 크기를 조정하고 해당를 인쇄 좋을 것, 나는 이미 시도하고 정직하게

<style> 
@media print { 
tr.vendorListHeading { 
background-color: #1a4567 !important; 
-webkit-print-color-adjust: exact; 
    } 
} 

@media print { 
.vendorListHeading th { 
color: white !important; 
    } 
} 

table { page-break-inside:auto } 
tr { page-break-inside:avoid; page-break-after:auto } 
thead { display:table-header-group } 
tfoot { display:table-footer-group } 
</style> 
+0

당신은 그것이 html이라는 것이고 프린터가 인쇄 가능한 영역 바깥쪽에 있기 때문에 도려내는 것이 아닌가? –

+0

@MarcB 그게 정확한 문제라고 생각하므로 을 조금 아래로 밀어 내서 인쇄 할 수있는 영역 밖에서 달라 붙지 않게하겠습니다. – Thomas

답변

0

페이지의 여백 또는 패딩 CSS를 사용하여 페이지에 패딩을 추가 할 수 있습니다.

0

를 작동하지 않았다 몇 가지 코드입니다.

문제는 프린터가 페이지 가장자리로 바로 인쇄하지 않는 것으로 보이는 것처럼 불필요한 노력을하는 것처럼 보입니다.

+1

그냥 내 청중이 페이지를 인쇄하고 종이로 만들고 싶습니다. 라이브 테이블의 사본. – Thomas

+0

아하이 봐요! 페이지를 이미지로 내보내고 blob을 사용하여 사용자에게 다운로드하여 인쇄하도록 할 수 있습니까? – TauOmicronMu

+0

제가 할 수는 있지만 모든 파일을 다운로드하고 다루는 번거 로움없이 간단하고 쉽게 만들려고합니다. – Thomas

관련 문제