Html 浏览器打印设计
我想使标题位置：固定。所以我为Html 浏览器打印设计,html,css,Html,Css,我想使标题位置：固定。所以我为.Header{position:fixed；top:0；left:0；width:100%；}编写了CSS，在第一页中没有问题。若页面不止一个，则按表重叠页眉。我试着给桌面留些空白，但没用 我想使标题固定，如下图所示： 我的代码： <style> @page { size: 8.27in 5.8in Portrait; } body
.Header{position:fixed；top:0；left:0；width:100%；}编写了CSS，在第一页中没有问题。若页面不止一个，则按表重叠页眉。我试着给桌面留些空白，但没用
我想使标题固定，如下图所示：
我的代码：
<style>
@page {
size: 8.27in 5.8in Portrait;
}
body {
font-family: Consolas, Courier, sans-serif;
font-size: 14px;
margin: 0;
}
label {
font-weight: 600;
line-height: 30px;
}
ul {
list-style: none;
padding: 0;
}
table {
margin: 8px 0;
width: 100%;
}
.printTable table thead {
background: #ddd;
}
.printTable table,
.printTable th,
.printTable td {
border: 1px solid #a9a6a6;
border-collapse: collapse;
padding: 5px 8px;
text-align: left;
}
.printTable table tr th:first-child {
width: 7%;
}
.hide {
display: none;
}
.Header h4,
.Header h2 {
margin-bottom: 4px;
margin-top: 4px;
}
img {
width: 130px;
height: 140px;
}
.PrintFoot p {
margin: 0 0 3px 0;
}
.Header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* .printTable {
margin-top: 300px !important;
}*/
</style>
<div class="main-div">
<div class="Header">
<div style="overflow: auto;">
<div style="width: 20%; float: left;">
<img src="https://www.opticcell.com/wp-content/uploads/logo-patriot-250x250.png">
</div>
<div style="width: 70%; float: left; text-align: center; font-family:'Lato', sans-serif;">
<div style="padding-left: 20px;">
<h2> {Company} </h2>
<h2 style="font-size: 16px;"> {MailName} </h2>
<h4> {Address}</h4>
<h4> {Phone}</h4>
<strong>PAN :</strong> {pan}
<h4>{InvoiceCopy}</h4>
</div>
</div>
<div style="width: 20%;"></div>
</div>
<div style="overflow: auto;">
<div style="width: 50%; float: left; text-align:left;">
<strong>Invoice No :</strong> {Invoice}
<br>
<strong>Patient ID :</strong> {PatientID}
<br>
<strong>Patient Name :</strong> {PatientName}
<br>
<strong>Age/Sex: </strong> {PatientAge}
<br>
<strong>Address :</strong> {PatientAddress}
<br>
<strong>Contact :</strong> {contact}
<br>
<strong>Party PAN :</strong> {party}
<br>
<strong>IP no. : </strong> {ipno}
</div>
<div style="width: 50%; float: left; text-align: right;">
<strong>Date :</strong> {Date}
<br>
<strong>Claim Code :</strong> {ClaimID}
<br>
<strong>Billing Type :</strong> {Type}
<br>
<strong>Bill To :</strong> {AccountLedger}
<br>
<strong>Payment mode :</strong> {Type}
<br>
<strong>Refer By:</strong> {refer}
<br>
<strong>Location:</strong> {location}
</div>
</div>
</div>
<div class="MiddlePart">
<div class="printTable">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>S.N.</th>
<th>Particular</th>
<th>Qty</th>
<th>Rate</th>
<th>Net Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>S.N.</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>1</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>2</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>3</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>4</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>5</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>6</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>7</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>8</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>9</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>10</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>11</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>12</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>13</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>14</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>15</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>16</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>17</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>18</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>19</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>20</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>21</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>22</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>23</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>24</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>25</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
<tr>
<td>26</td>
<td>Particular</td>
<td>Qty</td>
<td>Rate</td>
<td>Net Total</td>
</tr>
</tbody>
</table>
</div>
<div style="overflow: auto;">
<div style="width: 68%; float: left;">
<strong>Pre-Deposit :</strong> {preDepo}
<br>
<strong>New Deposit :</strong> {newDepo}
<br>
<strong>New Deposit :</strong> {newDepo}
<br>
<strong>In Words: </strong> {InWords}
</div>
<div style="width: 32%; float: left; text-align: right;">
<strong>Bill Total: </strong> {BillTotal}
<br>
<strong>Discount : </strong> {Discount}
<br>
<strong>Net Total : </strong> {NetTotal}
<br>
<strong>Net Total : </strong> {NetTotal}
<br>
<strong>Net Total : </strong> {narration}
<br>
<strong>Enter By :</strong> {User}
</div>
</div>
</div>
<div class="PrintFoot" style="margin-top: 10px;">
<p><strong>Lab Login :</strong> {LoginCredential}</p>
<p><strong>Print Date : </strong> Admin {PrintDate}</p>
<p style="margin: 15px 0;">
<strong>Note : </strong>
If there are any, kindly bring all previous reports and documents on the day of the appointment or treatment. There will be no refunds without original invoice. </p>
<p style="text-align: center;">Get Well Soon !!</p>
</div>
</div>
<!-- end snippet -->
@页面{
尺寸：8.27英寸5.8英寸肖像；
}
身体{
字体系列：Consolas、Courier、sans serif；
字体大小：14px；
保证金：0；
}
标签{
字号：600；
线高：30px；
}
保险商实验室{
列表样式：无；
填充：0；
}
桌子{
利润率：8px0；
宽度：100%；
}
.printTable表thead{
背景：ddd；
}
.打印表，
.打印表th，
.printTable td{
边框：1px实心#A9A6A66；
边界塌陷：塌陷；
填充：5px 8px；
文本对齐：左对齐；
}
.printTable表tr th：第一个子项{
宽度：7%；
}
.隐藏{
显示：无；
}
.收割台h4，
.标题h2{
利润底部：4倍；
利润上限：4倍；
}
img{
宽度：130px；
高度：140像素；
}
.PrintFoot p{
利润率：0.3px 0；
}
.标题{
位置：固定；
排名：0；
左：0；
宽度：100%；
}
/*.打印表{
利润率顶部：300px！重要；
}*/
{公司}
{MailName}
{地址}
{电话}
PAN:{PAN}
{InvoiceCopy}
发票编号：{Invoice}
患者ID:{PatientID}
患者姓名：{PatientName}
年龄/性别：{PatientAge}
地址：{PatientAddress}
联系人：{Contact}
政党潘：{Party}
IP编号：{ipno}
日期：{Date}
索赔代码：{ClaimID}
计费类型：{Type}
账单收件人：{AccountLedger}
支付方式：{Type}
引用人：{refere}
位置：{Location}
S.N。
特指的
数量
比率
净总额
S.N。
特指的
数量
比率
净总额
1.
特指的
数量
比率
净总额
2.
特指的
数量
比率
净总额
3.
特指的
数量
比率
净总额
4.
特指的
数量
比率
净总额
5.
.Header {
position: fixed; **Remove this property from it and check it's working fine for you**
top: 0;
left: 0;
width: 100%;
}