테이블 행은 두 페이지 (인쇄 매체)

나는 웹 페이지에서 OK있는 테이블을 가로 질러 분할,하지만 내 테이블 (Ctrl 키를 + P)를 인쇄 할 때 그렇지 내가 원하는 방식으로 나누기. 첫 번째 페이지의 마지막 행은 첫 번째 페이지의 행 부분과 두 번째 페이지의 행의 다른 부분으로 나뉩니다. 그래서, 문제를 극복 할 수있는 방법이 있는가, 행은 다른 내용과 크기를 가질 수 있습니다. 나는 또한이 속성을 시도했다.테이블 행은 두 페이지 (인쇄 매체)

page-break-before/after: auto. page-break-inside:avoid;

결과가 없지만. 테이블을 깨고 마지막 행을 인쇄 매체의 두 부분으로 나누지 않고 테이블의 일부를 다음 페이지로 옮길 수있는 방법이 있습니까? 어떤 도움을 주시면 감사하겠습니다.

enter image description here

테이블 번째 TD { 테두리 : 1 픽셀 솔리드 블랙; 국경 붕괴 : 붕괴; } th, td { 패딩 : 5px; }

</style> 
</head> 
<body> 
<table style="width:100%;"> 
<tr> 
    <th><span>Firstname</span></th> 
    <th><span>Lastname</span></th>  
    <th><span>Points</span></th> 
</tr> 
<tr> 
    <td><span>Jill</span></td> 
    <td><span>Smith</span></td>  
    <td><span>50</span></td> 
</tr> 
<tr> 
    <td><span>Eve</span></td> 
    <td><span>Jackson</span></td>  
    <td><span>94</span></td> 
</tr> 
<tr> 
    <td><span>John</span></td> 
    <td><span>Doe</span></td>  
    <td><span>80</span></td> 
</tr> 
    /*here I have many <tr> elements*/ 
</table> 

</body> 
</html>

출처

2014-06-22 natalie

당신은 화면에 보이지 않는 수 있지만 인쇄 할 때 새 페이지로 요소를 강제 페이지 나누기를 요청할 수 있습니다. 그러나 규칙은 예상보다 미묘합니다.

CSS 속성page-break-before:always블록 소자에인가 전용으로 할 수있다. 인라인이 아니거나 테이블 행 또는 목록 항목과 같이 이상한 것일 수 없습니다. 행이나 셀의 스타일을 지정하지 말고 <tbody> 또는 <br/>도 지정하지 마십시오. 그리고 브라우저에서 생략 할 수있는 요소가 될 수 없으므로 스타일이있는 빈 <div>을 던져 넣을 수 없습니다. 예를 들어 스타일을 제공하기 위해 첫 번째 셀 내용 주위에 <div> 또는 <p>을 추가해야합니다.

마찬가지로 page-break-after:always은 이전 행의 끝 부분에서 비슷한 것으로 적용 할 수 있습니다. 나는 항상 이것을 보호하기를 원하는 행이나 그룹이 있기 때문에 이것을 완전히 짜증나게합니다.

테이블의 기본 스타일이 이미 page-break-before:avoid 인 경우가 많으므로 일부 브라우저에서는 표 스타일을 page-break-inside:auto으로 변경하기를 원할 수도 있습니다.

기본 스타일이므로 을 추가하면 도움이되지 않습니다.. 브라우저는 이미 테이블을 깨는 것을 피하려고합니다. 그러나 쉽게 제거하지 못하면 다른 옵션이 쉽게 사용할 수 없게됩니다 (특히 Chrome).

출처

2014-08-16 17:24:26

제대로 이해하면 행 사이에만 테이블이 손상되고 그 테이블에는 테이블이없는 것이 좋습니다. 다음 CSS 규칙과 파이어 폭스와 인터넷 익스플로러에서이 작업을 수행 할 수 있습니다

tr {page-break-inside: avoid;}

를 불행하게도, 같은 크롬과 같은 다른 인기있는 브라우저에서 작동하지 않습니다.

제안 된 바와 같이 개별 셀의 내용에서 페이지 나누기가 "page-break-inside : avoid;"가있는 div에 배치함으로써 방지 할 수 있습니다. 설정하지만 콘텐츠 높이가 행 내에서 다를 경우 행의 일부가 두 개의 서로 다른 페이지에서 계속됩니다.

정말이 문제를 해결하고 싶습니다. 그걸로 수행해야하는 I have posted a solution here에 자바 스크립트를 기꺼이 던져야합니다.

출처

2014-09-09 18:28:04 DoctorDestructo

이것은 나를 위해 작동하지 않습니다. 다른 솔루션? – delphirules

@ delphirules Chrome, Safari 및 Opera와 같은 Webkit 브라우저에서 작동하는 솔루션을 원한다면 내 게시물 하단의 링크를 확인하십시오. – DoctorDestructo

테이블 행은 두 페이지 (인쇄 매체)

답변

관련 문제