作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在要打印的网页上遇到页眉和页脚问题。我的自定义页眉和页脚应该打印在每一页上。页眉打印在页面顶部,这很好,但如果页面上的内容较少,则页脚不会打印在页面底部。页脚是否打印取决于内容。
我的代码是:-
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<link rel='stylesheet' type='text/css' href='print.css' media='print'>
<title></title>
</head>
<body>
<table border="0" align="center" width="100%">
<thead>
<tr>
<th align="center" width="100%">
<font size="5" color="black"><strong>HEADER HERE</strong></font>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td align="center" width="100%">
<font size="4" color="black"><strong>FOOTER HERE</strong></font>
</td>
</tr>
</tfoot>
<tbody height="100%">
<tr>
<td width="100%">
CONTENT HERE
</td>
</tr>
</tbody>
</table>
</body>
</html>
我的 CSS 是:-
.thead {
display: table-header-group;
}
.tfoot {
display: table-footer-group;
}
有人可以建议我怎么做吗?这会有很大帮助吗?
最佳答案
因为你有一个print.css
,写(只在print.css
):
thead {
display: block;
position: fixed;
top: 0;
}
tfoot {
display: block;
position: fixed;
bottom: 0;
}
根据您的 thead
和 tfoot
可能占据的高度,使用适当的 margin-top
和 margin-bottom
在表上以避免可能发生的任何重叠。
关于html - 打印页面中的页眉和页脚?不是 Web 浏览器页眉和页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3664664/
我是一名优秀的程序员,十分优秀!