chrome的分页符解决方案（javascript）

众所周知，这是一个很棒的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 }

对铬不起作用。因此，现在是解决办法。我有这个表结构（请注意JSP和EL语法）

并检查此JS：

     var repeat = $('.repeat tr');

     $('.break-page').after(repeat.clone());

太棒了：）这正是我想要的。检查此第一页的显示方式：

第二页，你可以看到页眉重复，但是，看看这个巨大的空白：

就这样。你们能帮我摆脱那个巨大的空白吗？ 如果有人和我有同样的问题，我也希望这能有所帮助

---

谢谢

我所做的只是：使用div而不是table标签。我还为chrome在20行之后插入了一个分页符。创建了一个javascript hack来再次添加标题

注意：这会为每个浏览器创建不同的页面和数据布局。Chrome有3页，最后一张桌子在中间有点…firefox只有两个页面，非常适合。那是我能做的最好的了

HTML

JS黑客

     var is_chrome = window.chrome;

     if(is_chrome){
         var repeat = $('.divHeading');

         $('.break-page').after(repeat.clone());             
     }

---

我所做的就是：用div代替table标签。我还为chrome在20行之后插入了一个分页符。创建了一个javascript hack来再次添加标题

注意：这会为每个浏览器创建不同的页面和数据布局。Chrome有3页，最后一张桌子在中间有点…firefox只有两个页面，非常适合。那是我能做的最好的了

HTML

JS黑客

     var is_chrome = window.chrome;

     if(is_chrome){
         var repeat = $('.divHeading');

         $('.break-page').after(repeat.clone());             
     }

---

我想你会在谷歌的打印预览中看到这一点。右键单击并检查元素，查看是否确定了导致问题的原因。我猜第二页的表格（实际上）正是从你的第一页表格坏掉的地方开始的。虽然我无法检查打印预览中的元素。我从chrome上得到的只是：

PS：我想你是对的！我想你会在谷歌的打印预览中看到这一点。右键单击并检查元素，查看是否确定了导致问题的原因。我猜第二页的表格（实际上）正是从你的第一页表格坏掉的地方开始的。虽然我无法检查打印预览中的元素。我从chrome上得到的只是：

PS：我想你是对的！

            <div class="divTable">
                <div class="divHeading">
                    <div class="divCell">${i18n.label.initialValue}</div>
                    <div class="divCell">${i18n.label.additions}</div>
                    <div class="divCell">${i18n.label.discounts}</div>
                    <div class="divCell">${i18n.label.finalValue}</div>
                </div>
                <c:forEach items="${detailedCashFlow.transactions}" var="t" varStatus="loop">
                        <div class="divCell money">${t.initialValue}</div>
                        <div class="divCell money">${t.totalAddition}</div>
                        <div class="divCell money">${t.totalDiscount}</div>
                        <div class="divCell money">${t.value}</div>
                    </div>

                    //THIS IS VERY IMPORTANT
                    <c:if test="${fn:length(detailedCashFlow.transactions) > (loop.index + 1 ) && (loop.index + 1) % 20 == 0}">
                        <div class="break-page"></div>
                    </c:if>
                </c:forEach>                                        
            </div>

            .divTable
            {
                display: table;
                width: 100%;
                margin-top: 20px;
            }
            .divTitle
            {
                display: table-caption;
                text-align: center;
                font-weight: bold;
                font-size: larger;
            }
            .divHeading
            {
                display: table-row;
                font-weight: bold;
                text-align: center; 
            }
            .divRow
            {
                display: table-row;
            }
            .divCell
            {
                display: table-cell;
                border: solid;
                border-width: thin;
                padding-left: 5px;
                padding-right: 5px;
                text-align: center;         
                font-size: 12px;
            }
            .divRow:nth-child(even){
                background: #aad4ff !important;
            }
            .divRow:nth-child(odd){
                background: #FFF !important;
            }

            @media print {                        
                .divHeading { 
                    display:table-header-group;
                }

                .divRow
                {
                    -webkit-column-break-inside: avoid;
                    webkit-page-break-inside:avoid; 
                    page-break-inside:avoid; page-break-after:auto;    
                }

                .break-page {
                    page-break-before: always;
                }
            }

     var is_chrome = window.chrome;

     if(is_chrome){
         var repeat = $('.divHeading');

         $('.break-page').after(repeat.clone());             
     }