I have a 프로젝트 인쇄면이 있는 HTML 표 필요로 하는 많은 행을.
내 문제는 여러 번의 인쇄했습니다 운행에서어떠한 테이블은 호출이네요 It 는 때때로 읽을 수 있도록 한 행에 잘라냅니다 반단면, 이 때문에 반단면 켜있을 페이지의 상단에 인쇄했습니다 는 최첨단 나머지는 다음 페이지로.
내가 생각할 수 있는 유일한 솔루션을 사용하는 것 대신 테이블 및 인력용 페이지 나누기 스택된 div 필요한 경우. 하지만 전체 생각해봤죠 변경하십시오 거치지 전에 내가 전에 이 물어볼 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
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>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
참고: 이후 항상 페이지 나누기 사용할 때 < 대한 table>; 이후 마지막 비트는 페이지 테이블 태그 생깁니다 분할합니다 공백 끝에 완전히 생성하기에 때마다! 이 문제를 해결하려면 그냥 변경하십시오 이후 자동 페이지 나누기. 또 제대로 작성하지 분할합니다 및 추가 공백 호출이네요
<html>
<head>
<style>
@media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
....
</body>
</html>
& # # 확대되고, 252, r mcds n& 220gb 시난
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
div { page-break-inside:avoid; } /* This is the key */
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
일부 브라우저에서는 페이지 나누기 위해 인사이드라면 수행됨을 고려한 것으로 보인다 '는' 만 표, 행 괜찼습니다 인라인 블록 셀 블록 요소를 사용할 수 없습니다.
이 '블록' 하면 '디스플레이를 사용하고, TR' 태그 ',' 페이지 나누기 위해 인사이드라면 :을 있을 수 있지만, 혼잡 수립하였습니다 작동하잖아 손가락으로 테이블 레이아웃.
여기에 대한 해답을 어느 누구도 나를 협력했습니다 크롬. 깃허브 창조하 대한 아이버린 몇 가지 유용한 이 목적을 위해 Javascript 이 협력했습니다 가져다줄래요:
이 class & # 39 splitForPrint& 추가하기만 js 데이터베이스에구성원을 코드 및 추가 # 39;; 또 여러 개의 페이지와 추가 깔끔하게 데이터베이스에구성원을 표 (테이블) 에 각 페이지 테이블 분할합니다 헤더입니다.
필자는 최근 이 문제를 해결할 수 있는 좋은 솔루션입니다.
.avoidBreak {
border: 2px solid;
page-break-inside:avoid;
}
function Print(){
$(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") });
$(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
window.print();
}
마치 작동됨 매력!
내가 됐지 정보정의다음 @vicenteherrera& # 39 의 외곽진입, 일부 tweak (않는비즈니스 아마도 부트스트랩에 3 특정).
기본적으로. 우리는 # 39 의, 또는 ',' tr 분할합니다 can& t # 39, re 필터링되지 블록 요소를 td they& 때문입니다. 그래서 우리는 우리의 '' 규칙 '에 대해 각각 포함 div 적용하십시오 page-break-*' div '. 둘째, 이러한 각 div 로 맨 위에 얹는 모든 보정하기 위해 일부 패딩 스타일 가공물은.
<style>
@media print {
/* avoid cutting tr's in half */
th div, td div {
margin-top:-8px;
padding-top:8px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
// Wrap each tr and td's content within a div
// (todo: add logic so we only do this when printing)
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>
다시 말해, 패딩 조정 필요가 있는 오프셋하려면 함정이거나 지터 (대표 내 생각엔 부트스트랩이 이르는) 소개되고 있는 것으로 알려졌다. # 39 m, m, i& I& # 39 에서 다른 것을 확신할 수 있는 새로운 솔루션을 내놓고 있지만, 이를 통해 이 문제의 답을 내가 그림 아마 누군가.
그래서 작은 트릭 및 작동하잖아 했다.
tfoot 스타일 함께 포지션: 고정. 아래쪽: 0px; ' 마지막 페이지 하단에 배치된 것은 너무 높으면 신앙이니라 바닥글에 com/go/vid0014_kr 중복되는 테이블.
tfoot 겨우: '디스플레이: 테이블 바닥글에 그룹. '
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
TFOOT.placer {
display: table-footer-group;
height: 130px;
}
TFOOT.contenter {
display: table-footer-group;
position: fixed;
bottom: 0px;
height: 130px;
}
<TFOOT class='placer'>
<TR>
<TD>
<!-- empty here
-->
</TD>
</TR>
</TFOOT>
<TFOOT class='contenter'>
<TR>
<TD>
your long text or high image here
</TD>
</TR>
</TFOOT>
끝 - < 스니핏 >;!
두 번째 1 위를 하면 해당 페이지를 스케줄합니다 마지막 비사양 이스쿠알 바닥글에.
<table>
<thead> <!-- there should be <thead> tag-->
<td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
</thead>
<tbody><!---<tbody>also must-->
<tr>
<td>data</td>
</tr>
<!--100 more rows-->
</tbody>
</table>
크로스 브라우저 및 작업 테스트되었습니다 그들위에 형식
뭐 보세요들. 대부분의 솔루션뀉뀉뀉뀉 여기에 didn& # 39, t) 에서 근무했다. 이게 어떻게 창조하셨노 협력했습니다 for me.
HTML
<table>
<thead>
<tr>
<th style="border:none;height:26px;"></th>
<th style="border:none;height:26px;"></th>
.
.
</tr>
<tr>
<th style="border:1px solid black">ABC</th>
<th style="border:1px solid black">ABC</th>
.
.
<tr>
</thead>
<tbody>
//YOUR CODE
</tbody>
</table>
첫 세트를 머리 한 도왔으매 좁히어 won& 더미 (dummy), t # 39 는 교체품으로 사용할 수 없는 두 번째 헤드에게 상단 경계선 (예: 동시에 기존 헤드입니다) 페이지 나누기.
하지만 이 모든 브라우저에서 수락됨 오토메이티드 작동하지 가져다줄래요 정보정의다음 css 일을 가져다줄래요:
tr
{
display: table-row-group;
page-break-inside:avoid;
page-break-after:auto;
}
Html 구조를 없었다.
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
...
</tbody>
</table>
또 다른 문제가 있었고, 저의 경우는 있지만, 이는 원래 문제의 해결되었으므로 thead tr '표' 에서 가장 끊기 위해.
결국 슬픔으로창백해지고 헤더입니다 문제, 내가 됐지 호스트당:
#theTable td *
{
page-break-inside:avoid;
}