我在同一个表中添加了大约 50 行。之后的内容与页脚重叠。 数据 15 显示,但数据 16 和数据 17 缺失
页脚应在底部的所有页面中可见。 示例:在医院打印出院摘要时,所有页面都有页脚。我试图实现但没有成功
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printable Document with Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
padding: 0;
padding-bottom: 140px; /* Ensure enough space between table and footer */
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Content, Footer */
min-height: 100vh;
}
.container {
width: 100%;
margin-bottom: 20px; /* Space between container and footer */
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
margin-top: 20px; /* Space between container and footer */
}
.table-wrapper {
overflow: hidden; /* Ensure table doesn't overlap footer */
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
@media print {
.footer {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 100px; /* Adjust height as needed */
visibility: visible !important; /* Ensure footer is visible on every printed page */
margin-top: 20px; /* Space between container and footer */
}
body {
padding-bottom: 500px; /* Adjust padding-bottom to create space for footer */
}
}
</style>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<!-- Example of a long table -->
<!-- Add more rows as needed -->
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 6</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 7</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 8</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 9</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 10</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 12</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 13</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 14</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 15</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 16</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 17</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 18</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 19</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 20</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 21</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 22</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 23</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 24</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 25</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 26</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 27</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 28</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 29</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 30</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- Add more rows as needed -->
<!-- This table will automatically split across pages -->
</tbody>
</table>
</div>
</div>
<div class="footer">
Footer Content - This will appear on every printed page.
</div>
</body>
</html>
`
打印此网页时应该可以工作
hi Use this for your solution
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printable Document with Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
padding: 0;
padding-bottom: 140px; /* Ensure enough space between table and footer */
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Content, Footer */
min-height: 100vh;
}
.container {
width: 100%;
margin-bottom: 20px; /* Space between container and footer */
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
margin-top: 20px; /* Space between container and footer */
}
.table-wrapper {
overflow: hidden; /* Ensure table doesn't overlap footer */
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
@media print {
.footer {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 100px; /* Adjust height as needed */
visibility: visible !important; /* Ensure footer is visible on every printed page */
margin-top: 20px; /* Space between container and footer */
}
body {
padding-bottom: 500px; /* Adjust padding-bottom to create space for footer */
}
}
</style>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<!-- Example of a long table -->
<!-- Add more rows as needed -->
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 6</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 7</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 8</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 9</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 10</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 12</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 13</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 14</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 15</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 16</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 17</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 18</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 19</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 20</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 21</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 22</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 23</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 24</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 25</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 26</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 27</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 28</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 29</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 30</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- Add more rows as needed -->
<!-- This table will automatically split across pages -->
</tbody>
</table>
</div>
</div>
</body>
<div class="footer">
Footer Content - This will appear on every printed page.
</div>
</html>`