어떻게 처리해야 하는 대형 테이블 인쇄할 때 HTML 페이지 나누기

I have a 프로젝트 인쇄면이 있는 HTML 표 필요로 하는 많은 행을.

내 문제는 여러 번의 인쇄했습니다 운행에서어떠한 테이블은 호출이네요 It 는 때때로 읽을 수 있도록 한 행에 잘라냅니다 반단면, 이 때문에 반단면 켜있을 페이지의 상단에 인쇄했습니다 는 최첨단 나머지는 다음 페이지로.

내가 생각할 수 있는 유일한 솔루션을 사용하는 것 대신 테이블 및 인력용 페이지 나누기 스택된 div 필요한 경우. 하지만 전체 생각해봤죠 변경하십시오 거치지 전에 내가 전에 이 물어볼 수 있습니다.

Jeremy W
편집된 질문22일 6월 2016 в 7:37
프로그래밍
printing html css html-table
19일 11월 2009 в 2:24
1074 파운드
질문에 대한 의견 (1)
해결책



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Test

    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }



    <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>

        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
Wassim Sboui
편집된 답변27일 4월 2016 в 2:25
해설 (16)

참고: 이후 항상 페이지 나누기 사용할 때 &lt 대한 table>; 이후 마지막 비트는 페이지 테이블 태그 생깁니다 분할합니다 공백 끝에 완전히 생성하기에 때마다! 이 문제를 해결하려면 그냥 변경하십시오 이후 자동 페이지 나누기. 또 제대로 작성하지 분할합니다 및 추가 공백 호출이네요




@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 }
}




....
해설 (2)

& # # 확대되고, 252, r mcds n& 220gb 시난




<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Test

    table { page-break-inside:auto }
    div   { page-break-inside:avoid; } /* This is the key */
    thead { display:table-header-group }
    tfoot { display:table-footer-group }



    <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>

        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>

일부 브라우저에서는 페이지 나누기 위해 인사이드라면 수행됨을 고려한 것으로 보인다 '는' 만 표, 행 괜찼습니다 인라인 블록 셀 블록 요소를 사용할 수 없습니다.

이 '블록' 하면 '디스플레이를 사용하고, TR' 태그 ',' 페이지 나누기 위해 인사이드라면 :을 있을 수 있지만, 혼잡 수립하였습니다 작동하잖아 손가락으로 테이블 레이아웃.

vicenteherrera
편집된 답변17일 10월 2018 в 5:41
해설 (3)

여기에 대한 해답을 어느 누구도 나를 협력했습니다 크롬. 깃허브 창조하 대한 아이버린 몇 가지 유용한 이 목적을 위해 Javascript 이 협력했습니다 가져다줄래요:

이 class & # 39 splitForPrint& 추가하기만 js 데이터베이스에구성원을 코드 및 추가 # 39;; 또 여러 개의 페이지와 추가 깔끔하게 데이터베이스에구성원을 표 (테이블) 에 각 페이지 테이블 분할합니다 헤더입니다.

Hakan Fıstık
편집된 답변31일 1월 2017 в 7:52
해설 (5)

이러한 CSS 속성을 사용하여.

page-break-after

page-break-before

예를 들면 다음과 같습니다.




@media print
{
table {page-break-after:always}
}




....

통해

해설 (4)

필자는 최근 이 문제를 해결할 수 있는 좋은 솔루션입니다.

  • CSS *:
.avoidBreak { 
    border: 2px solid;
    page-break-inside:avoid;
}
  • JS *:
function Print(){
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",  $(this).width() + "px")  });
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
    window.print();
}

마치 작동됨 매력!

Mr. Pyramid
편집된 답변16일 10월 2018 в 8:15
해설 (0)

내가 됐지 정보정의다음 @vicenteherrera& # 39 의 외곽진입, 일부 tweak (않는비즈니스 아마도 부트스트랩에 3 특정).

기본적으로. 우리는 # 39 의, 또는 ',' tr 분할합니다 can& t # 39, re 필터링되지 블록 요소를 td they& 때문입니다. 그래서 우리는 우리의 '' 규칙 '에 대해 각각 포함 div 적용하십시오 page-break-*' div '. 둘째, 이러한 각 div 로 맨 위에 얹는 모든 보정하기 위해 일부 패딩 스타일 가공물은.


    @media print {
        /* avoid cutting tr's in half */
        th div, td div {
            margin-top:-8px;
            padding-top:8px;
            page-break-inside:avoid;
        }
    }

<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 에서 다른 것을 확신할 수 있는 새로운 솔루션을 내놓고 있지만, 이를 통해 이 문제의 답을 내가 그림 아마 누군가.

해설 (0)

내가 하는 모든 같은 문제 및 검색, 마침내 나는 뭔가 나를 위해 작동하는 세례반 솔루션에 대한 모든 브라우저.

html {
height: 0;
}

이 css 와 자바스크립트 css 대신 이 있을 수 있습니다.

$("html").height(0);

ᄋ "이번 작업을 수행하는 것으로 잘 알려져 있다.

해설 (0)

39, t, 누구나 다양한 솔루션을 확인해봤는데 wasn& apc® 좋다.

그래서 작은 트릭 및 작동하잖아 했다.

tfoot 스타일 함께 포지션: 고정. 아래쪽: 0px; ' 마지막 페이지 하단에 배치된 것은 너무 높으면 신앙이니라 바닥글에 com/go/vid0014_kr 중복되는 테이블.

tfoot 겨우: '디스플레이: 테이블 바닥글에 그룹. '

39, t 정도의 isn& 없는 바닥에 마지막 페이지.

39 의 동일팔레트에 let& 두 tfoot:

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. &gt 거짓값 -;

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>

    </TD>
  </TR>
</TFOOT>  
<TFOOT  class='contenter'> 
  <TR>
    <TD>
      your long text or high image here
    </TD>
  </TR>
</TFOOT>

끝 - &lt 스니핏 >;!

두 번째 1 위를 하면 해당 페이지를 스케줄합니다 마지막 비사양 이스쿠알 바닥글에.

Minal Chauhan
편집된 답변9일 12월 2016 в 8:01
해설 (0)

39 위, 주어진 모든 제안을 했고, ve i& http://support. 단순하고 apc® 크로스 브라우저 이 문제에 대한 해결. 이 솔루션은 스타일 또는 페이지 나누기 위해 필요한 없다. 이 솔루션에 대한 형식은 다음과 같은 표 합니다.

<table>
    <thead>  
        <td>Heading</td> 
    </thead>
    <tbody>
        <tr>
            <td>data</td>
        </tr>

    </tbody>
</table>

크로스 브라우저 및 작업 테스트되었습니다 그들위에 형식

Neil
편집된 답변13일 3월 2017 в 7:33
해설 (1)

뭐 보세요들. 대부분의 솔루션뀉뀉뀉뀉 여기에 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 는 교체품으로 사용할 수 없는 두 번째 헤드에게 상단 경계선 (예: 동시에 기존 헤드입니다) 페이지 나누기.

해설 (0)

하지만 이 모든 브라우저에서 수락됨 오토메이티드 작동하지 가져다줄래요 정보정의다음 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;
}

39 이 didn&, t) 에서 가장 끊기 위해. 그냥 # 39 의 각 cell& 컨텐트입니다.

해설 (0)