使用可重复的表格标题和正确的分页符打印Web表单 [英] Printing web forms with repeatable table headers and proper page breaks
问题描述
我找不到类似的帖子，甚至找不到搜索引擎的帖子，觉得我可能正在咆哮错误的树。 Web表单是不可打印的吗？
语言：C＃.net v 4
使用WebForms进行开发
我有一个我们编写的应用程序需要打印一个表，我们是从数据库中对数据进行一些复杂的操作。如果表中的行数多于单个打印页面上的行数，则在使用浏览器打印页面时，如何复制表格顶部的标题行。
我需要一个插件吗？
该表是使用C＃创建的并显示在ASPX Web表单页面。
谢谢，仍然不确定哪个论坛发布网页表单。
表格显示在网页上，它只是打印它是一个问题。
嘿，您可以设置display：table-header-group;对于@media print规则中的标题，如此处 [< a href =http://stackoverflow.com/a/14042506target =_ blanktitle =New Window> ^ ]。
我在Firefox和IE9中进行了快速打印测试，似乎可以完成这项工作。 Chrome出于某种原因并不尊重它。
在解决方案2中OP评论后添加新内容：
那是'我用来测试它的页面 - 适用于Firefox，IE和Opera：
< ！DOCTYPE html >
< html >
< head >
< style type = text / css >
@ media print {
thead { display ： table-header-group; }
}
< / style >
< script type = text / javascript >
函数 onBodyLoad（）{
var tbl = document .getElementById（ tblForPrint< /跨度>）;
if （tbl）{
for （ var i = 1 ; i< 100 ; i ++）{
var row = tbl.insertRow（-1）;
var cell = row.insertCell（ 0 ）;
cell.innerHTML = 行 + i + Cell 0;
cell = row.insertCell（ 1 ）;
cell.innerHTML = 行 + i + Cell 1;
}
}
}
function onPrint（btn）{
btn.style.display = < span class =code-string> none;
window .print（）;
btn.style.display = ;
}
< / 脚本 >
< / head >
< body onload = onBodyLoad（）; >
< 输入 id = btnPrint type = button value = print onclick = onPrint（this）; / >
< table id = tblForPrint >
< < span class =code-leadattribute> thead >
< tr >
< th > 标题0 < / th >
< th > 标题1 < / th >
< / tr >
< / thead >
< span class =code-keyword>< tbody >
< tr >
< td > 行0单元格0 < / td >
< td > 第0行第1行< / td >
< tr >
< / tbody >
< / table >
< / body >
< / html >
至于Chrome和Safari无法正常工作 - 它是WebKit中的一个已知问题 - https://bugs.webkit.org/show_bug.cgi?id=17205 [ ^ ]。
祝你好运！
@Markovl，感谢您的回复
试过这似乎不起作用。我在标题行中添加了颜色更改以查看CSS的那部分是否正常工作，并且标题颜色变好了，它只是没有重复页面顶部的表格标题。
在Firefox，IE和Chrome中检查过，它们都没有用。
上面的摘要添加
@media print {
thead {display：table-header-group; }
}
到底部的样式表，然后是asp表，确保你添加TableSection =TableHeader
例如：
< asp：tableheaderrow tablesection =TableHeaderxmlns：asp =＃unknown >< / ASP：tableheaderrow>
I cannot find a a post that is similar, or even via search engine, and feel I may be barking up the wrong tree. Are web Forms just not printable?
Language: C# .net v 4
Development using WebForms
I have an application that we have written that needs to print a table, that we construct out of some complex manipulation of data from a database. If the table has more rows than fits on a single printed page how do I duplicate the header row on the top of the table when printing the page using a browser.
Do I need an addon or something?
The table is created using C# and displayed on an ASPX Web form page.
Thanks, still never sure which forum to post web form development into.
The table displays on the web page fine, it is just printing it that is a problem.
Hey, you could setdisplay:table-header-group;for your headers in a@media printrule, as shown here[^].
I did a quick printing test in Firefox and IE9 and seems to do the job. Chrome for some reason doesn''t honor it though.
New content added after OPs comments in Solution 2:
That''s the page I used to test it - works for me in Firefox, IE and Opera:
<!DOCTYPE html> <html> <head> <style type="text/css"> @media print { thead { display: table-header-group; } } </style> <script type="text/javascript"> function onBodyLoad() { var tbl = document.getElementById("tblForPrint"); if (tbl) { for (var i = 1; i < 100; i++) { var row = tbl.insertRow(-1); var cell = row.insertCell(0); cell.innerHTML = "Row " + i + " Cell 0"; cell = row.insertCell(1); cell.innerHTML = "Row " + i + " Cell 1"; } } } function onPrint(btn) { btn.style.display = "none"; window.print(); btn.style.display = ""; } </script> </head> <body onload="onBodyLoad();"> <input id="btnPrint" type="button" value="print" onclick="onPrint(this);" /> <table id="tblForPrint"> <thead> <tr> <th>Header 0</th> <th>Header 1</th> </tr> </thead> <tbody> <tr> <td>Row 0 Cell 0</td> <td>Row 0 Cell 1</td> <tr> </tbody> </table> </body> </html>
As for Chrome and Safari not working ok - it is a known issue in WebKit - https://bugs.webkit.org/show_bug.cgi?id=17205[^].
Good luck!
@Markovl, thanks for responding
Tried that does not seem to work. I added a colour change to the header line to see if that part of the CSS was working, and the header colour changed fine, it just did not repeat the table headers on the top of the page.
Checked in Firefox, IE and Chrome, none of them worked.
In summary of above add
@media print { thead { display: table-header-group; } }
To you style sheet at the bottom, then is the asp table make sure you add TableSection="TableHeader"
eg:
<asp:tableheaderrow tablesection="TableHeader" xmlns:asp="#unknown"></asp:tableheaderrow>
这篇关于使用可重复的表格标题和正确的分页符打印Web表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
