表格打印怎么固定表头和底部？

Posted 2023-04-13

表格打印的固定表头可设置打印标题“顶端标题行”，但是该功能只能设置一个连续的区域，也就是不能同时设置表头和底部，表头设置解决了。底部可以设置“页眉/页脚”进行设置。

参考技术A 日常办公中，涉及到一些单张的长、大的表格，显示屏不足以显示全部，在滚动浏览表格时，需要时时查看的表头，未能保留，导致不能方便察看表格，同时在打印时让每一页都有表头而不用自己一一添加怎么办呢?其实很简单，下面小编教你怎么办^_^

　　冻结窗口

　　1、首先打开Excel表格，如果你的表头只有一行，那么直接选择“视图-冻结窗格-冻结首行”就可以了。

　　2、如果你的表头是多行的，那么首先要选中表头的下方一行，举例来说就是如果你想将前两行作为表头那就选择第三行，然后选择视图选项下的“冻结窗格-冻结拆分窗格”。

　　3、此时在表格中无论你向下翻多少行，表头始终固定在那里。

　　4、如果想取消固定的表头，那么再次点击“冻结窗格-取消冻结窗格”就可以了。

　　5、以上就是电子版Excel表格让表头固定的方法。如果大家想在打印的时候每一页都有表头，那么用下面的方法。

　　设置打印标题

　　1、首先点击页面布局，然后选择打印标题。

　　2、在弹出的对话框中点击顶端标题行右侧的图标，如下图所示。

　　3、此时鼠标会变成横着的黑色箭头，拖动鼠标选择要作为表头的行，然后点击顶端标题行右侧的图标，如下图所示。

　　4、这时又会重新弹回原来的窗口，直接点击确定就可以了。

　　5、选择打印-打印预

　　6、这时你在打印预览里面就会发现每一页都有你设置的表头了。

　　7、怎么样，是不是很简单?下次我们就可以像这样直接设置好每页的表头，从而大大节省我们的工作时间了。 参考技术B 表格打印的固定表头可设置打印标题“顶端标题行”，但是该功能只能设置一个连续的区域，也就是不能同时设置表头和底部，表头设置解决了。底部可以设置“页眉/页脚”进行设置。 参考技术C 表格打印的固定表头可设置打印标题“顶端标题行”，但是该功能只能设置一个连续的区域，也就是不能同时设置表头和底部，表头设置解决了。底部可以设置“页眉/页脚”进行设置。 参考技术D 固定表打印头可以设置打印标题“顶行头”。但是，此功能只能设置连续区域，因此不能同时设置标题和底部。标题设置是固定的。“页眉和页脚”可以设置在底部。

css手写一个表头固定

Bootstrap,layui等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大，所以决定手写表头固定
主要遇到的个问题就是固定以后数据表格与表头的对齐问题，也看了很多我文章试下来都不怎么成功,只好自己一点点试
表头固定的一般思路是布两个table，一个放表头，一个放表格体，然后将表格体加上高度height以及overflow-y

    <div class="content">
    <div class="table_head">
    <table border>
            <colgroup>
                <col width="10%" />
                <col width="10%" />
                <col width="5%" />
                <col width="5%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col"/>
            </colgroup>
        <thead>
            <th>缩略图</th>
            <th>标题</th>
            <th>总价</th>
            <th>总销量</th>
            <th>周销量</th>
            <th>增幅</th>
            <th>商品评分</th>
            <th>分配开发</th>
            <th>SKU</th>
            <th>商品状态</th>
            <th>审核备注</th>
            <th>时间</th>
            <th>操作</th>
        </thead>
    </table>
    </div>
    <div class="table_body">
    <table border>
            <colgroup>
                <col width="10%" />
                <col width="10%" />
                <col width="5%" />
                <col width="5%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col width="10%"/>
                <col width="5%"/>
                <col"/>
            </colgroup>
            <tbody>
                <tr>
                    <td>此处应有图片</td>
                    <td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
                    <td>0.99</td>
                    <td>13113</td>
                    <td>107</td>
                    <td>-21%</td>
                    <td>5.0</td>
                    <td>张乐</td>
                    <td>abcadawdadawdawdadad</td>
                    <td>开发成功</td>
                    <td>备注</td>
                    <td>上架:2016-07-02
                        采集:2018-06-25</td>
                    <td>增加</td>
                </tr>
                <tr>
                        <td>此处应有图片</td>
                        <td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
                        <td>0.99</td>
                        <td>13113</td>
                        <td>107</td>
                        <td>-21%</td>
                        <td>5.0</td>
                        <td>张乐</td>
                        <td>abcadawdadawdawdadad</td>
                        <td>开发成功</td>
                        <td>备注</td>
                        <td>上架:2016-07-02
                            采集:2018-06-25</td>
                        <td>增加</td>
                </tr>
                <tr>
                        <td>此处应有图片</td>
                        <td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
                        <td>0.99</td>
                        <td>13113</td>
                        <td>107</td>
                        <td>-21%</td>
                        <td>5.0</td>
                        <td>张乐</td>
                        <td>abcadawdadawdawdadad</td>
                        <td>开发成功</td>
                        <td>备注</td>
                        <td>上架:2016-07-02
                            采集:2018-06-25</td>
                        <td>增加</td>
                </tr>
                <tr>
                        <td>此处应有图片</td>
                        <td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
                        <td>0.99</td>
                        <td>13113</td>
                        <td>107</td>
                        <td>-21%</td>
                        <td>5.0</td>
                        <td>张乐</td>
                        <td>abcadawdadawdawdadad</td>
                        <td>开发成功</td>
                        <td>备注</td>
                        <td>上架:2016-07-02
                            采集:2018-06-25</td>
                        <td>增加</td>
                </tr>
                <tr>
                        <td>此处应有图片</td>
                        <td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
                        <td>0.99</td>
                        <td>13113</td>
                        <td>107</td>
                        <td>-21%</td>
                        <td>5.0</td>
                        <td>张乐</td>
                        <td>abcadawdadawdawdadad</td>
                        <td>开发成功</td>
                        <td>备注</td>
                        <td>上架:2016-07-02
                            采集:2018-06-25</td>
                        <td>增加</td>
                </tr>
            </tbody>
    </table>
    </div>

两个table定义的不一致也就导致了表头与表格的不对齐，这里需要使用<colgroup>将两个表格的列宽定义一致

   <colgroup>
      <col width="10%" />
      <col width="10%" />
      <col width="5%" />
      <col width="5%"/>
      <col width="5%"/>
      <col width="10%"/>
      <col width="10%"/>
      <col width="5%"/>
      <col width="10%"/>
      <col width="5%"/>
      <col width="10%"/>
      <col width="5%"/>
      <col"/>
  </colgroup>

在两个table标签下都定义一下相同的<colgroup>,注意列数与表格列数相同，最后一列可以不要定义固定的宽

可以看出来还是没有对齐，这里有两个问题，一是：表体加上滚动条后会占约17px的宽度，第二个是表格的列宽table-layout默认取值automatic是随单元格内容撑起来的，所以要对这两个做调整。我的方法是给表头加一个padding_right:17px;两个table都设定为table-layout：fixed
css代码

        .content{
            width: 80%;
        }
        table {
            width: 100%;
            border-collapse : collapse; 
            border:1px solid #ccc;
            color:#4c4c4c;
        }
        th,td{
            padding:5px;
        }
        .table_body{
            height:312px;
            overflow-y: scroll;
        }
        .table_head{
            padding-right: 17px;
        }
        .table_body table,.table_head table{
            table-layout: fixed;
        }

这样就完美对齐了，适合任意屏幕宽度

有几个需要注意的地方我的两个表格都使用div包裹起来，主要是由于表格display:table属性导致padding,overflow等属性很难设置上去，因此可以设置到外包裹的div上，毕竟table布局水真的深，一时还不敢碰