Question

一段时间以来，我一直在寻找一种在多页文档上打印固定页眉和页脚的解决方案，我最终使它能够工作，但仍然存在一些问题。

问题在于我的tds的宽度不符合我的要求（（我得到了一个乱序表）。

这是我的html代码：

<table>
  <thead>
      <tr>
          <td>
              <div class="header-space">
              </div>
          </td>
      </tr>
  </thead>
  <tfoot>
    <tr>
      <td>
        <div class="footer-space"></div>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        <div class="content">
            <tr>
              <td>Value A</td>
              <td>Value B</td>
              <td>Value C</td>
              <td>Value D</td>
              <td>Value E</td>
              <td>Value F</td>
              <td>Value G</td>
            </tr>
            <tr></tr>
            ...
        </div>
      </td>
    </tr>
  </tbody>
</table>
<div class="footer">
  <p>FOOTER CONTENT</p>
</div>
<div class="header">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
    <th>F</th>
    <th>G</th>
  </tr>
  <tr></tr>
  ...
</div>
<style>
.header, .header-space {
    height: 280px;
    width: 100%;
}
.footer, .footer-space {
  height: 50px;

}

.header {
  position: fixed;
  top: 0;
}

.footer {
  position: fixed;
  bottom: 0;
}
</style>

感谢您阅读我的帖子！美好的一天

Answer 1

对不起，如果我的评论有点刺耳。
如果您想要一个固定的页眉和页脚，并且表格在它们之间滚动，则请参阅other堆栈文章或此小提琴http://jsfiddle.net/T9Bhm/7上的解决方案，该解决方案可以归为

  tbody {
            height: 120px;
            overflow-y: auto;
        }

为什么标题由<tr>组成但在表之外？如果将其放在<table>标记内，它将占据与<td>相同的宽度

将TH与TH同步

1 个答案: