尝试使用css仅在页面1上放置页脚

时间:2016-11-23 16:26:55

标签: html css

https://jsfiddle.net/therbq0h/

此链接提供类似于正在显示的内容,它没有格式化,但它提供2页。必须在IE中打印。

我有一个将数据存储在数据库中的页面和一个以通用方式显示数据的单独页面。我正在创建自定义页面以完全匹配word文档,这是以前创建所有文档的方式。页面有标题,正文,页脚。

我需要打印看起来像:
第1页 ------------头-------------
------------身体---------------
从数据库中提取的部分数据以表格形式输入 ------------页脚-------------

Page 2
------------身体---------------
从数据库中提取的部分数据以表格

的形式输入

Page 3
------------身体---------------
从数据库中提取的剩余数据以表格

输入

数据的大小是动态的。

目前thead和tbody工作正常,但我需要第1页的页脚,顶部只有一条水平线。

<body>
    <div class="wrapper_class" >
        <div>
            <table style="width:100%;font-size:8pt;">
                <thead>
                    <tr>
                        <td style="width:33%;">
                            Customer names:
                        </td>
                        <td style="width:33%;">
                            <img src="" />
                        </td>
                        <td style="width:33%;">
                            Customer names:
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <table>
                                <tr>
                                    <td>
                                        some more rows and columns
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td colspan="3">
                            <div class="floatCenterParent">
                                <p><%SELECT MemoField FROM Table WHERE ID = 100%></p>
                            </div>
                            <div>
                                <p><%SELECT MemoField FROM Table WHERE ID = 101%></p>
                            </div>
                            <div style="some more styling">
                                more text
                            </div>

                        </td>
                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <td colspan="3">
                            static text
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="floating_Menu">
            buttons that dont get printed
        </div>
    </div>
</body>

页面布局与word文档匹配,我只需要第1页的页脚,即使没有整页也必须在底部。只需要在IE10 +中正确打印。如果可能,跨浏览器会很好。

页脚在底部的每页上都能正确显示,除了最后一页,它紧跟在正文后面。

1 个答案:

答案 0 :(得分:0)

.footer { display: none; }
.page-one > .footer { display: block; }