Question

我的问题是，我有两个不同的html文件，其中包含一个包含theader，tfooter和tbody的表。

第一个是我自己创建的测试原因，它看起来像这样：

<html>
<head>
    <title>The Invoice</title>
    <style type="text/css">

    table.invoice { background-color: #dddddd; font-family: sans-serif; }

    td, th { background-color: #ffffff; padding: 5pt; }
    td.unit { text-align: right; }
    td.price { text-align: right; }

    thead { display: table-header-group; }
    tfoot th { text-align: right; }

    </style>
</head>
<body>
    <div style="width:auto !important; overflow:hidden; position:relative">
    <table class="invoice" cellspacing="1" cellpadding="0">
        <thead>
           <th>Unit</th>
           <th>Description</th>
           <th>Price</th>
        </thead>
        <tfoot>
           <tr>
             <th colspan="2">Sum</th>
             <td class="price">1.230,32 EUR</td>
           </tr>
        </tfoot>
        <tbody> 
               <tr><td>1</td><td>Excel</td><td >150,00 EUR</td></tr>
               <tr><td>2</td><td>Document</td><td>150,00 EUR</td></tr>
                            ... and so on ...
        </tbody>
    </table>
    </div>
</body>
</html>

每当我在IE9上尝试打印预览时，它会在最后一页显示tfoot（在我的例子中为第5页），它显示了正文内容价格列的总和。当我在Mozilla Firefox 11.0中尝试相同时，它会在每个页面上显示tfoot的总和，当然我不想要。

我问的主要原因是因为我有一个FreeAgent html dom，我想打印一些Invoice。有了这个html文件，甚至IE9在每一页上都显示了tfoot，再次！，我不想要。

我玩了

 @media print { tfoot { display: table-footer-group;
                 position: absolute;        
                 bottom: 0; }}

它只显示一次页脚，但是在左下角的第一页上，所有内容都显示在我的文本的其余部分...

非常感谢您的想法或解决方案！：）

Answer 1

在打印样式表中尝试使用此CSS，它会使tfoot成为另一行，同时保持Datatables.net需要的正确语法。

table tfoot{display:table-row-group;}

Answer 2

tfoot实际上应该“始终在底部可见”（或沿着这些行显示），因此Firefox在每个页面的表格底部打印页脚是有意义的。< / p>

特别是如果您有表头单元格来命名列，或者使用页脚作为标签或重复的标题，这将非常有用。

你应该把你的金额作为表格末尾的另一行。

打印预览在每页上重复

2 个答案: