我正在使用 javascript 函数打印表格
<script type="text/javascript" >
function printpreview(divId) {
var content = document.getElementById(divId).innerHTML;
var mywindow = window.open('', 'Print', 'height=600,width=800');
mywindow.document.write('<html><head><title>Print</title>');
mywindow.document.write('</head><body>');
mywindow.document.write('<div align="center"><h2> MANAGEMENT</h2></div>');
mywindow.document.write('<div align="center"><h3>Sales Records</h3></div>');
mywindow.document.write("<link rel=\"stylesheet\" href=\"/public/css/style.css\"
type=\"text/css\"/>");
mywindow.document.write(content);
mywindow.document.write('<p style="color: #5B5745; font-family:verdana; font-size:11px; font-style:normal; font-weight:bold;">' );
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
}
我使用下面的代码在我的打印页面中使用页脚
mywindow.document.write('<div class="footer-text">Copyright 2019 Resource Planing System. All rights reserved.</div></p> </div>');
CSS 是
.footer-text {
position: fixed;
bottom: 0;
}
但是我的页脚页面与上表重叠，现在为了避免这种情况我想限制每页打印一些特定的行，任何人都可以帮助我如何限制每页的行数，我试过了下面的代码，但它只适用于 IE 而不是 chrome。我需要 chrome 的解决方案
@media print {
tr:nth-of-type(n){
page-break-after:always;
}
}
最佳答案
如果问题真的更多的是如何让页脚始终位于页面底部，而其他内容不会干扰，那么您可以实现 a sticky footer很容易使用flexboxes .
我做了一个快速演示 ~ 观察到 footer 元素保留在页面的最底部，没有其他内容影响它或重叠/遮盖它，我认为，这是什么你所希望的。
(忽略表格的内容——它只是混合了虚拟数据以“充实”用于显示的 HTML 表格)
这个工作的关键是将 flex:1 分配给页眉和页脚没有的 main 元素。所有三个的其他值可能会进一步改变布局 - 可能会达到 play with Flexboxes可能有帮助？!
我添加了一个按钮，用于插入 HTML 表格的副本，这样您就可以看到页脚仍然是底部的页脚，尽管有所有其他内容。
祝你好运
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Basic Flexbox: Sticky Footer</title>
<style>
body{ display:flex; flex-direction:column; height:100vh; box-sizing:border-box; margin:0; padding:0; font-family:monospace }
main, header, footer{ display:flex; flex-direction:column; width:100%; margin:auto; }
header{ order:1; align-items:center; justify-content:center; background:rgba(0,0,200,0.1); }
main{ order:2; flex:2; align-items:flex-start; justify-content:flex-start; background:rgba(0,200,0,0.1) }
footer{ order:3; align-items:center; justify-content:center; background:rgba(200,0,0,0.1); }
table{ margin:1rem; border:1px solid gray; border-collapse:collapse; box-shadow:0 0 10px rgba(0,0,255,0.5) }
td{ border:1px solid gray }
table > caption{ margin:auto; background:gray; color:white}
</style>
</head>
<body>
<header>A meaningful header</header>
<main>
<input type='button' value='Add table' />
<table>
<caption>A meaningful table showing meaningful stuff</caption>
<tr>
<td>Measurement(s)</td>
<td>DNA methylation profiling data • whole genome sequencing assay • bisulfite sequencing assay • transcription profiling assay</td>
</tr>
<tr>
<td>Technology Type(s)</td>
<td>DNA methylation profiling assay • DNA sequencing • RNA sequencing</td>
</tr>
<tr>
<td>Factor Type(s)</td>
<td>age • sex • smoking status</td>
</tr>
<tr>
<td>Sample Characteristic - Organism</td>
<td>Homo sapiens</td>
</tr>
<tr>
<td colspan=2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p></td>
</tr>
<tr>
<td colspan=2><p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</p></td>
</tr>
<tr>
<td colspan=2><p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.</p></td>
</tr>
<tr>
<td colspan=2><p>Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet.</p></td>
</tr>
</table>
</main>
<footer>Copyright 2019 Resource Planning System. All rights deserved, all wrongs reversed.</footer>
<script>
document.querySelector('[type="button"]').addEventListener('click',(e)=>{
e.target.parentNode.appendChild( e.target.parentNode.querySelector('table').cloneNode( true ) )
})
</script>
</body>
</html>
关于javascript - 我如何在使用 css javascript 和 php 时限制 HTML 表打印页面中的特定行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58639728/