Code
2023-06-18 08:00:03

如何使用HTML打印页眉和页脚上的每一个打印文档?

是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?

我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。

为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。

有人知道使用HTML/CSS是否可行吗?

当前回答

穆罕默德·穆萨维的评论是最好的答案，所以这里出现了一个实际的答案:

在每页的顶部和底部自动重复标题/页脚。然而，tfoot并不粘到最后一页的底部。

位置:固定打印将在每页重复，页脚将粘在所有页的底部，包括最后一页-但是，它不会为其内容创造空间。

把它们:

HTML:

<header>(repeated header)</header>

<table class=paging><thead><tr><td>&nbsp;</td></tr></thead><tbody><tr><td>

(content goes here)

</td></tr></tbody><tfoot><tr><td>&nbsp;</td></tr></tfoot></table>

<footer>(repeated footer)</footer>

CSS:

@page {
    size: letter;
    margin: .5in;
}

@media print {
    table.paging thead td, table.paging tfoot td {
        height: .5in;
    }
}

header, footer {
    width: 100%; height: .5in;
}

header {
    position: absolute;
    top: 0;
}

@media print {
    header, footer {
        position: fixed;
    }
    
    footer {
        bottom: 0;
    }
}

你可以在这里添加很多细节，但我故意将其削减到最少，以获得一个干净的渲染页眉和页脚，在屏幕上出现一次，在每个打印页面的顶部和底部出现一次。

https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a

2020-10-29 21:32:01

其他回答

使用换行符来定义CSS中的样式:

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

然后在文档中适当的位置添加标记:

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

参考文献

CSS分页媒体:分页符 MDN: page-break-before MDN:前 多栏布局 XHTML打印:第二版 Webkit Bug 5097: CSS2的page-break-after不能工作 打印HTML常见问题:程序是否尊重CSS样式，如分页后? 打印大型HTML表时如何处理换页

2012-06-24 06:38:23

根据我的工作经验，我想我的职位是:固定工作。

body { background: #eaeaed; -webkit-print-color-adjust: exact; } .my-footer { background: #2db34a; bottom: 0; left: 0; position: fixed; right: 0; } .my-header { background: red; top: 0; left: 0; position: fixed; right: 0; } <html> <head> <meta charset=utf-8 /> <title>Header & Footer</title> </head> <body> <div> <div class="my-header">Fixed Header</div> <div class="my-footer">Fixed Footer</div> <table> <thead> <tr> <th>TH 1</th> <th>TH 2</th> </tr> </thead> <tbody> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> </tbody> </table> </div> </body> </html>

在chrome中按Ctrl+P查看每页的页眉和页脚文本。 希望能有所帮助

2017-02-02 12:37:34

我找到了一个解决这个问题的方法:

当你用“page”className分隔每一页时，你可以给“page”这个样式:

.page{
  height: 1150px;
  page-break-after: always;
  overflow: hidden;
}

检查打印页面的预览，确保所有内容都在页面内，否则移动内容，让所有内容看起来都很整齐。

2022-11-27 14:58:41

我试图结合tfoot和css规则进行这场徒劳的战斗，但它只在Firefox上工作:(。当使用纯css时，内容在页脚上流动。当使用tfoot时，最后一页的页脚不能很好地停留在底部。这是因为表脚是用于表的，而不是用于物理页面的。在Chrome 16, Opera 11, Firefox 3 & 6和IE6上测试。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Header & Footer test</title>

<style>

  @media screen {
    div#footer_wrapper {
      display: none;
    }
  }

  @media print {
    tfoot { visibility: hidden; }

    div#footer_wrapper {
      margin: 0px 2px 0px 7px;
      position: fixed;
      bottom: 0;
    }

    div#footer_content {
      font-weight: bold;
    }
  }

</style>
</head>

<body>

<div id="footer_wrapper">
  <div id="footer_content">
    Total 4923
  </div>
</div>


<TABLE CELLPADDING=6>

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
</TBODY>

<TFOOT id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR>
</TFOOT>

</TABLE>

</body>
</html>
2012-01-31 13:56:43

如果你可以使用javascipt，让客户端处理使用javascript布局内容，根据可用空间放置元素。

你可以使用jquery columnizer插件在固定大小的块中动态布局你的内容，并将你的页眉和页脚作为渲染例程的一部分。 http://welcome.totheinter.net/columnizer-jquery-plugin/

参见例10 http://welcome.totheinter.net/autocolumn/sample10.html

如果在操作系统中启用，浏览器仍然会添加自己的页眉或页脚。跨平台和浏览器的一致布局可能需要有条件的css。

2013-04-03 04:20:42

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1