在使用 css、javascript 和 ZE1BFD762321E409CEEZ4AC0B66 时，我如何限制 HTML 表的打印页面中的特定行数

Question

i am printing a table using javascript function我正在使用 javascript function 打印表格

<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();
}

i am using a footer in my print page using below code我使用下面的代码在我的打印页面中使用页脚

mywindow.document.write('<div class="footer-text">Copyright 2019 Resource Planing System. All rights reserved.</div></p> </div>');

and the css is和 css 是

.footer-text { 
    position: fixed;
    bottom: 0;
}

but my footer page is overlapping with the above table, now to avoid this i want to restrict no of some specific rows printing per page, can any one help me how can i restrict no of rows per page, i have tried the below code, but its only working in IE and not chrome.但是我的页脚页面与上表重叠，现在为避免这种情况，我想限制每页打印的某些特定行，谁能帮助我如何限制每页的行数，我尝试了下面的代码，但它只适用于 IE 而不是 chrome。 i need the solution in chrome我需要 chrome 中的解决方案

@media print  {            
    tr:nth-of-type(n){
        page-break-after:always;
    }
}

Answer 1

If the problem is really more how to have a footer always at the bottom of the page that other content will not interfere with then you can implement a sticky footer very easily using flexboxes .如果问题真的更多是如何在页面底部始终有一个其他内容不会干扰的页脚，那么您可以使用flexboxes非常轻松地实现一个sticky footer 。

I put together a quick demo ~ observe that the footer element remains at the very bottom of the page and none of the other content affects it or overlaps/obscures it which is, I think, what you were hoping for.我整理了一个快速演示〜观察footer元素保留在页面的最底部，并且没有其他内容会影响它或重叠/遮盖它，我认为这正是您所希望的。

( ignore the contents of the table - it's just a mix of dummy data to "flesh out" the HTML table for display ) （忽略表格的内容 - 它只是混合虚拟数据来“充实” HTML 表格以进行显示）

The key for this to work is to assign flex:1 to the main element where the header and footer do not have this.这个工作的关键是将flex:1分配给 header 和页脚没有这个的main元素。 Other values for all three are possible to alter the layout yet further - perhaps getting to play with Flexboxes might help?!所有这三个值的其他值都可以进一步改变布局 - 也许使用 Flexbox可能会有所帮助？！

I added a button that inserts clones of the HTML table so you can see that the footer remains a footer at the bottom despite all other content.我添加了一个按钮，用于插入 HTML 表的克隆，因此您可以看到尽管有所有其他内容，页脚仍然是底部的页脚。

Good luck祝你好运

<!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>

在使用 css、javascript 和 ZE1BFD762321E409CEEZ4AC0B66 时，我如何限制 HTML 表的打印页面中的特定行数

问题描述

1 个解决方案

解决方案1
0 2019-10-31 14:45:47

在使用 css、javascript 和 ZE1BFD762321E409CEEZ4AC0B66 时，我如何限制 HTML 表的打印页面中的特定行数

问题描述

1 个解决方案

解决方案1 0 2019-10-31 14:45:47

解决方案1
0 2019-10-31 14:45:47