页面中断无法正常工作

Question

Hello, I hope someone can help me with this problem. Basically I'm having an issue with page-break, let me break down every little step I made:

#1 Initially, I had a page break problem using window.print(), due to the fact that I was using Table tag.

     @media print {

  @page :first{
    margin-top:1cm; 
  }

  @page {
    margin-top:3cm; 
  }
}

h1, h2, h3, h4, div, table, tr, td, th{
    font-family:Arial, Helvetica, sans-serif;
    border-collapse:collapse;
    width:auto;
    margin:11px;
}


.cuerpo{ 
    position:relative;
    top:200px;
    right:9px;
    font-size:9px;
}


.cuerpo{
    padding-top:150px;
    font-size:9px;
    font-weight:500;
    page-break-after:always;
}


.cuerpo tr {
    padding:3px;
    line-height:15px;
    height:10px;
    width:15px;
}

.cuerpo tbody td, .cuerpo thead th{
    border:1px solid #000000;
    padding:1px;
}

http://jsfiddle.net/the_best/u99BQ/

---

#2 Then, I found in a forum that page-break works with 'display:block;' instead and changed the font-size:13px so it doesn't look too big and can fit as well on the paper. I added that particular line of code in css this is what happened: if you try font-size=100% will break correctly but it'll look way too big.

 @media print {

   @page :first{
    margin-top:1cm; 
  }

   @page {
     margin-top:3cm; 
   }
}

h1, h2, h3, h4, div, table, tr, td, th{
    font-family:Arial, Helvetica, sans-serif;
    border-collapse:collapse;
}


thead tr .ancho {
    width:95;
    width:80;
}

#nombre-hotel {
    text-align:center;
}


#cuerpo{ 
    page-break-inside:avoid;
    padding-top:150px;
    position:relative;
    top:50px;
    border-collapse:collapse;
    font-size:90%;
}

#cuerpo tr{ 
    page-break-inside:avoid;
    page-break-after:auto; 
    /*page-break-after:auto;*/
    display:block;
    /*padding:3px;
    line-height:15px;
    height:10px;
    width:15px;*/
}

#cuerpo td, #cuerpo th{ 
    page-break-inside:avoid;
    border:solid 1px #CCCCCC;
}

http://jsfiddle.net/the_best/VwTa7/

Basically the issue is to get the page-break right with an appropriate font size, and and align cells. Unfortunately that's not coming out for me. If someone can help me I would appreciate it a lot. If you need detailed information just let me know.

Answer 1

if you give .th-hotel a min-width and use font-size: 13px; page break works I think the problem were the multi lines at the hotel column

http://jsfiddle.net/VwTa7/1/

    #cuerpo{ 
        page-break-inside:auto;
        font-size: 13px;
    }

    #cuerpo tr{ 
        page-break-inside:avoid;
        page-break-after:auto;
    }

    .th-hotel {
        min-width: 250px;
    }

Answer 2

Oh never mind, I just figured out that it's way better to use dompdf to deliver your document to a PDF. The PDF format takes care of proper page-break regardless you're using table or anthing else. It just works fine just need to hit the print button and it'll come out good. Thanks for your comment anyways.