用html实现excel冻结窗口的功能 固定行固定列

最新推荐文章于 2022-03-24 11:38:00 发布
最新推荐文章于 2022-03-24 11:38:00 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： js 文章标签： html excel冻窗口 固定行列 js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38130280/article/details/97157881
版权

如图显示：

红色部分为固定的行列。

话不多说，下图代码，直接复制出来新建一个html文件打开即可；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>固定标题列、标题头table</title>
  <style>
    table {
      border-collapse: collapse;
      border-spacing: 0px;
      width: 100%;
      border: #9E9E9E solid 0px;
      font-family: "Microsoft YaHei UI";
      font-size: 14px;
    }
    td {
      mso-style-parent: style0;
      padding-top: 1px;
      padding-right: 1px;
      padding-left: 1px;
      mso-ignore: padding;
      color: windowtext;
      font-size: 12.0pt;
      font-weight: 400;
      font-style: normal;
      text-decoration: none;

      mso-generic-font-family: auto;
      mso-font-charset: 134;
      mso-number-format: General;
      text-align: general;
      vertical-align: bottom;
      border: none;
      mso-background-source: auto;
      mso-pattern: auto;
      mso-protection: locked visible;
      white-space: nowrap;
      mso-rotate: 0;
    }
    table td {
      border: 1px solid #9E9E9E;
      height: 25px;
      text-align: center;
      border-left: 0px;
    }

    table th {
      border: #9E9E9E solid 1px;
      white-space: nowrap;
      height: 21px;
      border-top: 0px;
      border-left: 0px;
    }

    .t_left {
      width: 30%;
      height: auto;
      float: left;
      border-top: 1px solid #9E9E9E;
      border-left: 1px solid #9E9E9E;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    /*t_r_content和cl_freeze高度相差20px， 高度为外观显示高度，可根据情况调整*/

    .t_r_content {
      width: 100%;
      height: 220px;
      background: #fff;
      overflow: auto;
    }

    .cl_freeze {
      height: 200px;
      overflow: hidden;
      width: 100%;
    }
    /* width 调整左边标题列宽度（左侧外观显示宽度）; 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小20px*/
    /* width 宽度为 右侧外观显示宽度 实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */
    /* 如果显示不正常，调整 t_r的width 使其和t_left的width之和小于100%；等于100%时会有问题*/

    .t_r {
      width: 70%;
      height: auto;
      float: left;
      border-top: 1px solid #9E9E9E;
      border-right: #9E9E9E solid 1px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .t_r table {
      width: 1700px;
    }

    .t_r_title {
      width: 1720px;
    }
    /*宽度比 t_r table 大20px （至少大20，小了滚动条滑到右侧显示有问题）*/

    .t_r_t {
      width: 100%;
      overflow: hidden;
    }

    .bordertop {
      border-top: 0px;
    }
    .t-title{
      font-size: 18px;
      line-height: 30px;
      height: 30px;
    }
    th.t-col-num ,th.t-row-num ,td.t-row-num{
      background: #d8d8d8;
      color: #555;
    }
    .t-row-title{
      background: rgb(191, 191, 191);
    }
  </style>
  <script>
    function aa() {
      var a = document.getElementById("t_r_content").scrollTop+1;
      var b = document.getElementById("t_r_content").scrollLeft;
      document.getElementById("cl_freeze").scrollTop = a;
      document.getElementById("t_r_t").scrollLeft = b;
    }
  </script>
</head>

<body>
<div class="t-wrap">
  <!--<div class="t-top" style="width:100%">
    <table>
      <thead>
      <tr>
        <th class="t-row-num" width="20"></th>
        <th width="80">A</th>
        <th width="80">B</th>
        <th width="200">C</th>
        <th width="200">D</th>
        <th width="200">E</th>
        <th width="200">F</th>
        <th width="200">G</th>
        <th width="200">H</th>
      </tr>
      <tr>
        <th class="t-row-num" width="20">1</th>
        <th colspan="8" class="t-title">这里是标题内容</th>
      </tr>
      </thead>
    </table>
  </div>-->
  <div style="width:100%">
    <div class="t_left">
      <div style="width:100%;">
        <table>
          <tr>
            <th class="t-col-num" width="20"></th>
            <th class="t-col-num" width="80">A</th>
            <th class="t-col-num" width="80">B</th>
          </tr>
          <tr>
            <th class="t-row-num" width="20">1</th>
            <th class="t-title" colspan="2"></th>
          </tr>
          <tr>
            <th class="t-row-num" width="20">2</th>
            <th class="t-row-title" width="80">A</th>
            <th class="t-row-title" width="80">B</th>
          </tr>
          <tr>
            <th class="t-row-num" width="20">3</th>
            <th class="t-row-title" width="80">列名1</th>
            <th class="t-row-title" width="80">列名2</th>
          </tr>
        </table>
      </div>
      <div class="cl_freeze" id="cl_freeze">
        <table>
          <tr>
            <td class="t-row-num" width="20">4</td>
            <td class="bordertop" width="80">1</td>
            <td class="bordertop" width="80">1</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">5</td>
            <td>2</td>
            <td>2</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">6</td>
            <td>3</td>
            <td>3</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">7</td>
            <td>4</td>
            <td>4</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">8</td>
            <td>5</td>
            <td>5</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">9</td>
            <td>6</td>
            <td>6</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">10</td>
            <td>7</td>
            <td>7</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">11</td>
            <td>8</td>
            <td>8</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">12</td>
            <td>9</td>
            <td>9</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">13</td>
            <td>10</td>
            <td>10</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">14</td>
            <td>11</td>
            <td>11</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">15</td>
            <td>12</td>
            <td>12</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">16</td>
            <td>13</td>
            <td>13</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">17</td>
            <td>14</td>
            <td>14</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">18</td>
            <td>15</td>
            <td>15</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">19</td>
            <td>16</td>
            <td>16</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">20</td>
            <td>17</td>
            <td>17</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">21</td>
            <td>18</td>
            <td>18</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">22</td>
            <td>19</td>
            <td>19</td>
          </tr>
          <tr>
            <td class="t-row-num" width="20">23</td>
            <td>20</td>
            <td>20</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="t_r">
      <div class="t_r_t" id="t_r_t">
        <div class="t_r_title">
          <table>
            <tr>
              <th class="t-col-num" width="200">C</th>
              <th class="t-col-num" width="200">D</th>
              <th class="t-col-num" width="200">E</th>
              <th class="t-col-num" width="200">F</th>
              <th class="t-col-num" width="200">G</th>
              <th class="t-col-num" width="200">H</th>
            </tr>
            <tr>
              <th colspan="8" class="t-title">这里是标题内容</th>
            </tr>
            <tr>
              <th class="t-row-title" width="200">C</th>
              <th class="t-row-title" width="200">D</th>
              <th class="t-row-title" width="200">E</th>
              <th class="t-row-title" width="200">F</th>
              <th class="t-row-title" width="200">G</th>
              <th class="t-row-title" width="200">H</th>
            </tr>
            <tr>
              <th class="t-row-title" width="200">列名3</th>
              <th class="t-row-title" width="200">列名4</th>
              <th class="t-row-title" width="200">列名5</th>
              <th class="t-row-title" width="200">列名6</th>
              <th class="t-row-title" width="200">列名7</th>
              <th class="t-row-title" width="200">列名8</th>
            </tr>
          </table>
        </div>
      </div>
      <div class="t_r_content" id="t_r_content" οnscrοll="aa()">
        <table>
          <tr>
            <td width="200" class="bordertop">1</td>
            <td width="200" class="bordertop">1</td>
            <td width="200" class="bordertop">1</td>
            <td width="200" class="bordertop">1</td>
            <td width="200" class="bordertop">1</td>
            <td width="200" class="bordertop">1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
          </tr>
          <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
          </tr>
          <tr>
            <td>5</td>
            <td>5</td>
            <td>5</td>
            <td>5</td>
            <td>5</td>
            <td>5</td>
          </tr>
          <tr>
            <td>6</td>
            <td>6</td>
            <td>6</td>
            <td>6</td>
            <td>6</td>
            <td>6</td>
          </tr>
          <tr>
            <td>7</td>
            <td>7</td>
            <td>7</td>
            <td>7</td>
            <td>7</td>
            <td>7</td>
          </tr>
          <tr>
            <td>8</td>
            <td>8</td>
            <td>8</td>
            <td>8</td>
            <td>8</td>
            <td>8</td>
          </tr>
          <tr>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
          </tr>
          <tr>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
          </tr>
          <tr>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
          </tr>
          <tr>
            <td>12</td>
            <td>12</td>
            <td>12</td>
            <td>12</td>
            <td>12</td>
            <td>12</td>
          </tr>
          <tr>
            <td>13</td>
            <td>13</td>
            <td>13</td>
            <td>13</td>
            <td>13</td>
            <td>13</td>
          </tr>
          <tr>
            <td>14</td>
            <td>14</td>
            <td>14</td>
            <td>14</td>
            <td>14</td>
            <td>14</td>
          </tr>
          <tr>
            <td>15</td>
            <td>15</td>
            <td>15</td>
            <td>15</td>
            <td>15</td>
            <td>15</td>
          </tr>
          <tr>
            <td>16</td>
            <td>16</td>
            <td>16</td>
            <td>16</td>
            <td>16</td>
            <td>16</td>
          </tr>
          <tr>
            <td>17</td>
            <td>17</td>
            <td>17</td>
            <td>17</td>
            <td>17</td>
            <td>17</td>
          </tr>
          <tr>
            <td>18</td>
            <td>18</td>
            <td>18</td>
            <td>18</td>
            <td>18</td>
            <td>18</td>
          </tr>
          <tr>
            <td>19</td>
            <td>19</td>
            <td>19</td>
            <td>19</td>
            <td>19</td>
            <td>19</td>
          </tr>
          <tr>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

</body>

</html>

没有昵称_000
关注
专栏目录
Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
weixin_30340353的博客
08-01 1184
目录 一、概述 二、效果展示 三、实现思路 1、冻结行、冻结列 2、行高自适应 3、蚂蚁线 四、测试代码 1、添加表格数据 2、设置冻结行、列 3、行高、列宽 ...
Vue多种方法实现表头、首列固定
热门推荐
Clyde Kuo
12-19 3万+
有时表格太大，滚动时信息查看不方便，需要对表格进行全局表头、首列固定， 上效果： 一、创建多个表格进行覆盖 思路：当页面滚动到临界值时，出现固定表头、首列 先创建一个活动表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
HTML 实现行、列冻结功能
05-23
HTML 实现行、列冻结功能,使用了javascript、jquery 的方式实现了类似excel冻结的功能。
html怎么设置冻结表格,如何在HTML表格上复制“冻结窗格”功能？
weixin_29163797的博客
07-04 746
我构建了一些有点类似的东西，但不太复杂：我希望表格(标题)的第一行在数据行垂直滚动时被冻结。我将它实现为2个不同的表格，每个表格都有固定宽度的单元格，每个表格都有自己的DIV。 “header”div只是静态的，“body”div使用overflow：auto来滚动。你的问题更复杂，因为你想在两个轴上“冻结窗格”，并支持在两个轴上滚动(我有更多的房地产可以使用，并且不必考虑水平滚动完全)。不过，我...
html仿excel冻结 css,如果做类似Excel 冻结首列的效果_html/css_WEB-ITnose
weixin_35851515的博客
06-10 307
我有一个table ，数据是动态读取的，现在想把前面四列做成类似Excel 冻结的效果，拖动 横向的滚动条的时候，这四列固定不动，各位有什么思路没有。如果把这四列提出来到一个独立的DIV，势必会破坏原来的数据结构，而且，我这个页面数据很多，炒鸡复杂，所以希望有个改动量最小的解决方案。回复讨论(解决方案)Duang！~ Duang！~ Duang！Duang！~ Duang！~ Duang！圆圆，...
固定表和行头与列头
我想我是海 冬天的大海 心情随风轻摆
04-25 1546
new document <!-- function FixTable(TableID, FixColumnNumber, width, height) { /// /// 锁定表头和列 /// sorex.cnblogs.com /// /
html冻结页面,按下按钮后HTML页面会冻结
weixin_30433715的博客
06-04 871
所以，这是一个奇怪的问题。我有一个CSS/HTML按钮的网页。当我按下按钮时，页面冻结。它不会崩溃，只会冻结(按钮应该在点击后淡出)。另外，我无法打开JavaScript(或f12)控制台，我无法重新加载页面。在页面上，即使当我将鼠标移出按钮或任何可点击的按钮时，鼠标仍然显示为指针。但是，我仍然可以移动鼠标，退出选项卡，转到其他选项卡，打开选项卡并切换全屏页面。这里是我的HTML：按下按钮后HTM...
冻结表格模板html,Excel冻结单元格（锁定单元格）用选项和快捷键，含冻结一个、多个和有公式的单元格及冻结表格格式不能输入...
weixin_39616071的博客
06-28 2023
在 Excel 中，冻结单元格既可用 Excel 内容的选项，又可以用快捷键。既可以冻结一个单元格又可以冻结多个单元格(包含只冻结有公式的单元格)，既可以冻结一行一列又可以冻结多行多列，并且能冻结整个表格。无论是冻结单元格还是冻结行列，方法都一样，只要选中它们即可。如果要求只冻结表格格式(即结构)，也就是不能再设置单元格格式(包括固定行高列宽、不能设置字体、颜色、加粗、下划线等)，只允许向单元格输...
[python 学习笔记] openpyxl -- excel样式设置 & 冻结窗格
GYK0812的博客
02-20 4114
1. 设置填充颜色， 字体， 边框 from openpyxl import load_workbook from openpyxl.styles import PatternFill, Border, Side, Alignment, Protection, Font wb = load_workbook(file_path) ws = wb['sheet_name'] # 设置...
像Excel一样冻结HTML表格的表头-博计报表让你更方便
bireport的专栏
08-08 1057
报表很大，看的时候就需要滚动条了，但是一滚整个报表都动了，表头也看不到了，这看着就太麻烦了，老要来回来去地拖上拖下拖左拖右。 Excel想到了这个问题，提供了冻结窗格的功能，可以把上边或左边的几列固定下来，这样，再怎么滚动表头总是不动，就不会看走眼了。 可惜的是，在WEB上的HTML表格却没直接提供这个功能，它的TABLE只能整个地滚。怎么能做出象Excel那样冻结表头的效果呢？简单的想法
H5 表格冻结首行，首列和最后一行
02-20
页面显示表格，表格的首行冻结，首列冻结，最后一行也冻结，实现数据查看和合计查看的效果。DemoDemoDemoDemo
html锁定表头冻结行列
01-15
html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列html锁定表头冻结行列
c html页面不可复制,c# – 如何在HTML表上复制“冻结窗格”功能？
weixin_29663861的博客
06-03 126
我构建了一些类似的东西,但不太复杂：我希望表格(标题)的第一行在数据行垂直滚动时被冻结.我将其实现为2个不同的表,每个表都有固定宽度的单元格,每个表都有自己的DIV. “header”div只是静态静态,“body”div使用overflow：auto来滚动.你的问题更复杂,因为你想要在两个轴上“冻结窗格”,并支持在两个轴上滚动(我有更多的房地产要使用,而不必考虑水平滚动).不过,我想知道你是否可...
Html实现Excel锁定表头效果
zhou472845337的博客
03-24 508
区域划分，列锁定区，行锁定区 需要分四个Table，每个区对应一个table 共锁区和行锁区放在一个div并浮动,行锁定区指定最大宽度 列锁区和内容区是在一个div中，并浮动，列区指定最大高度，内容区指定最大宽度和最大高度，用于产生滚动条 这两个div中最好是中间夹着隔行div,比如使用bootstrap的class <div class="clearfix"></div> Html代码 a.先给到table指定的高和宽 table..
html 导航冻结效果
只有十分努力，才能看起来毫不费力
12-20 5019
首先，介绍一下案例背景，设置冻结前的效果和代码如下 .page-top { width:100%; height:46px; background:rgba(1,47,99,0.95); min-width:950; display:block; } .ask-panels { width:100%; height:63px; ba
HTML冻结表头与侧边栏，表格内容可编辑
weixin_39927443的博客
12-29 1521
HTML冻结表头与侧边栏，表格内容可编辑 制作过程 其实表头的固定就相当于使用两个表格，一个在上面，一个在下面，上下排列，下面的表格容器可以滚动，上面的只有表头一行，为了让两个表格各列的宽度一致，可以获取下面表格各列的宽度，然后给上面表格添加对应的width，下面的代码是事例，浏览器可以运行 表格列可以将一个input放入td，这样就可以编辑表格内容，通过focus和blur可以为单元格添加不同的...
html如何冻结字段,HTML / CSS – 右侧冻结表列
weixin_35802571的博客
05-30 268
我在这里找到了固定/冻结左列的解决方案：http://jsfiddle.net/emn13/YMvk9/body { font:16px Calibri;}table { border-collapse:separate; border-top: 3px solid grey; }td {margin:0;border:3px solid grey;border-top-width:0px;whi...
html如何冻结字段,如何在可滚动的div中冻结html表的第一列和最后一列？
weixin_31089065的博客
05-30 251
ozan..5我可以提出一个有点非正统的解决方案吗？您如何考虑将'total'列放在'name'列之后,而不是在最后？这不会避免只需要滚动表的一部分吗？这不完全是你所要求的,但也许这是一个充分的解决方案,因为替代方案会非常混乱.(例如,在表格之外放置'total'和'name'列会在不是所有行都具有相同高度时产生对齐问题.你可以用javascript来纠正这个问题但是你会进入一个全新的世界痛).同...
echarts图形导出到excel
qq_38130280的博客
04-24 1万+
前台使用的为：extjs+echarts 定义了一个panel { xtype: 'panel', name: 'parentChartPanel', ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值