[英]How to avoid HTML table background color from spanning across pages on print?
I have a fairly large table in HTML that spans many pages when printed. 我有一个相当大的HTML表格,打印时横跨许多页面。 I have used the following code to ensure table rows do not break across pages when printing and that works fine.
我使用以下代码来确保表行在打印时不会跨页,并且工作正常。
@media print{ tr { page-break-inside: avoid; } }
However for some reason, the background color of the table continues to span across pages and I cannot seem to figure out why. 但是由于某种原因,表格的背景色继续跨页面显示,我似乎无法弄清楚原因。
Screenshot of table color spanning across page even though table row break happens correctly. 即使表格行中断正确发生,表格颜色跨页面的屏幕截图。
The full CSS and table html is below: 完整的CSS和表格html如下:
<style> table { border-collapse: collapse; background-color:#E2EFD9; } table, td, th { border: 1px solid black; } td{ padding: 2px; } @media print{ table td:last-child { display:none } table th:last-child { display:none } tr { page-break-inside: avoid; } } </style>
<table> <tbody> <tr> <td style="width: 158px;"> <p> <strong>Photo</strong> </p> </td> <td style="width: 475px;"> <p> <strong>Description</strong> </p> </td> <td style="width: 52px;"> <p> <strong>Select</strong> </p> </td> </tr> <tr> etc.....
Found the answer myself, documenting it here for anyone facing this problem in the future. 自己找到答案,并在此处记录,以备日后遇到此问题的任何人。
Simply color the table by row in the css. 只需在CSS中逐行为表格着色。 ie.
即。
tr{ background-color:#E2EFD9; //whatever color you want }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.