Question

这个问题让我保持清醒，有没有办法动态破解表格，并在下一页显示标题？

事实是，这是一个报告，我不知道它将在屏幕上显示的行数，我使用AngularJS来获取信息并在屏幕上显示。

这就是我的页面：

打印时：

这是我的HTML页面

<!DOCTYPE html>
<html>
<head>
    <!-- #INCLUDE VIRTUAL="/wvdf_bib/BIB/Includes/bHtmlHead.inc"-->
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-8">
                <div class="col-xs-4">
                    <br />
                    <img class="col-xs-12" src="http://www.cargoweber.com/logos/profile/mepl-international-llc-logo-dubai-dub-916.png" />
                </div>
                <div class="col-xs-8">
                    <h3>Demo Company</h3>
                    <p>
                        John Smith<br />
                        demo@demo1.com<br />
                        http://www.demo1.com<br />
                        Phone: Tel: +1-908-301-6025
                    </p>
                </div>
            </div>

            <div class="col-xs-4">
                <h1>Rate quote</h1>
                <h5>Created on 17 Jun 2015</h5>
                <p>Document Number #LCL FCLJS150617003-1</p>
                <small>As of date <strong>17 Jun 2015</strong></small><br />
                <small>Valid until <strong>17 Jul 2015</strong></small>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-6">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="col-xs-6">To</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="col-xs-5">
                                    <br />
                                    <img class="col-xs-12" src="http://www.cocacola.pt/19201201/jopt/post_images/standard/detail_lbITzYnZakM0pchLQsx9frA8wmHFdO.png" />
                                </div>
                                <div class="col-xs-7">
                                    <h3>Coca Cola</h3>
                                    <p>
                                        http://www.cocacola.com
                                    </p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row>
            <div class="col-xs-12">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <td colspan="7"></td>
                            <td colspan="3">Total Ocean Freight Sum Up</td>                             
                        </tr>
                        <tr>
                            <th>POL</th>
                            <th>Carrier</th>
                            <th>POD</th>
                            <th>VIA Port</th>
                            <th>Effective date</th>
                            <th>Expiry date</th>
                            <th>Transit time</th>
                            <th>Container20</th>
                            <th>Container40</th>
                            <th>Container40HC</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>CNYTN Port of Yantian</td>
                            <td>NYK Line</td>
                            <td>USLAX Los Angeles</td>
                            <td></td>
                            <td>5/17/15</td>
                            <td>5/17/16</td>
                            <td>20 days</td>
                            <td>USD 1,235.00</td>
                            <td>USD 1,627.00</td>
                            <td>USD 1,627.00</td>
                        </tr>
                        <tr>
                            Another x rows
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

问题是：我需要在新页面上再次打印thead，我才能让它工作=（

有谁知道如何解决这个问题？

Answer 1

您应该在<th> thead reference

中使用<td>代替<thead>.

<table class="table table-bordered">
    <thead>
        <tr>
            <th class="col-xs-6">To</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

在你的CSS中你可以添加

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

Answer 2

这张桌子是什么？印刷？如果是这样，您可以使用JavaScript从现有表元素创建新表。您可以使用JS来分割关闭并在X行之后创建一个新表。最终结果将是您的原始表，转换为多个表，每个表保存X行。这将使您能够在每个页面上使用相同的标题打印它。

这是我使用的......你可以根据自己的需要进行修改。基本上，只是在......的范围内执行某些事情。

<table id="myTable">
stuff
</table>
<div id="myNewTable"></div>

<script>
var myNewTable = separateTables('myTable','20');
document.getElementById("myNewTable").innerHTML = myNewTable;

    function separateTables(table,rowLimit) {
        /* Initialize variables */
        var $table = $("#"+table);
        var $headerCells = $table.find("thead th");
        var $footerCells = $table.find("tfoot tr");
        var $rows = $table.find("tbody tr");
        var pageBreak = '<div style="page-break-before:always">&nbsp;</div>';        
        var headers = [], footers = [], rows = [];

        /* Add all header cells to headers array */ 
        $headerCells.each(function() {
            headers.push(this.outerHTML);
        });

        /* Add all rows in tbody to rows array */
        $rows.each(function(){
            rows.push(this.outerHTML);
        });

        /* Create table opening structure */
        var el = document.getElementById(table);
        var attr = [];
        var vals = [];
        for (var i=0, attrs=el.attributes, l=attrs.length; i<l; i++)
        {
            attr.push(attrs.item(i).nodeName);
            vals.push(attrs.item(i).nodeValue);
        }
        var table = '<table ';
        for(x=0;x<attr.length;x++)
        {
            //Ignore cellpadding & cellspacing - set both to zero to prevent issues
            if(attr[x].toString().toLowerCase() == 'cellspacing' || attr[x].toString().toLowerCase() == 'cellpadding')
            {
                vals[x] = "0";
            }
            table += attr[x]+'="'+vals[x]+'" ';
        }
        table += '>';

        /* Create header structure */
        var header = '<thead><tr>';
        for(x=0;x<headers.length;x++)
        {
            header += headers[x];
        }
        header += '</tr></thead>';

        /* Create footer structure */
        $footerCells.each(function(){
            footers.push(this.outerHTML);
        });
        var footer = '<tfoot>';
        for(x=0;x<footers.length;x++)
        {
            footer += footers[x];
        }
        footer += '</tfoot>';

        /* Create our tables */
        var newOutput = table + header + '<tbody>';

        /* Loop over rows and create new table after count hits rowLimit */
        var iCount = 0;
        for (x=0;x<rows.length;x++)
        {
            iCount += 1;
            newOutput += rows[x];
            if(iCount == rowLimit)
            {
                newOutput += '</tbody></table>'+pageBreak+table+header+'<tbody>';
                iCount = 0;
            }
        }
        /* Close remaining table structure and return value */
        newOutput += '</tbody>'+footer+'</table>';
        return newOutput;       
    }
</script>

Chrome表中的HTML表分页打印

2 个答案: