javascript - 分页符无法正常工作

Question

你好，希望有人能帮我解决这个问题。基本上我遇到了分页问题，​​让我分解一下我所做的每一个小步骤:​​

#1 最初，我在使用 window.print() 时遇到了分页问题，​​因为我使用的是 Table 标签。

     @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 然后，我在一个论坛上发现分页符与“display:block;”一起使用相反，并更改了 font-size:13px，因此它看起来不会太大并且也适合在纸上。 我在 css 中添加了那行特定的代码，这就是发生的事情: 如果你尝试 font-size=100% 会正确中断，但它看起来太大了。

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

基本上，问题是使用适当的字体大小正确分页，并对齐单元格。不幸的是，这不适合我。如果有人可以帮助我，我将不胜感激。如果您需要详细信息，请告诉我。

Answer 1

如果你给 .th-hotel 一个 min-width 并使用 font-size: 13px;分页工作 我认为问题出在酒店栏的多行

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