正文

表格列固定

大圣回来了  大圣回来了  2022-08-18  597

关键词：

<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <title>类似excel的滚动机制，当移动滚动条时固定table的第一行和第一列</title>
    <style type="text/css">
      #table-container{width:650px;height:250px;overflow: auto;margin: 50px;border: 1px solid #DDD;}
      #table-container table{width: 100%;border-width: 0;border-collapse: collapse;}
      #table-container table td{padding: 0;border-right: 1px solid #DDD;border-bottom: 1px solid #DDD;background: #FFF;}
      #table-container .table-top td, #table-container .table-lt td, #table-container .table-left td{background: green;}
  
      #table-container .table-top td:last-child{border-right: 0px solid #DDD;}
      #table-container .table-right td:last-child{border-right: 0px solid #DDD;}
      #table-container .table-right tr:last-child td{border-bottom: 0px solid #DDD;}
      #table-container .table-left tr:last-child td{border-bottom: 0px solid #DDD;}
    
      #table-container td div{display: inline-block;max-width: 200px;margin:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left;line-height: 24px;}
        
      #table-container .table-lt{position: fixed;z-index:3;}
      #table-container .table-top{position: fixed;overflow:hidden;z-index:2;}
      #table-container .table-left{position: fixed;overflow:hidden;z-index:2;}
      #table-container .table-right{position: relative;z-index:1;}
      #table-container .table-mask{position: relative;}
        
    </style>
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
  </head>
  <body>
  
    <div id="table-container">
      <div class="table-lt">
        <table>
          <tbody>
            <tr>
              <td>
                <div>
                  header-left-top
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="table-top">
        <div class="table-mask">
          <table>
            <tbody>
              <tr>
                <td>
                  <div>topTitle1</div>
                </td>
                <td>
                  <div>topTitle2</div>
                </td>
                <td>
                  <div>topTitle3</div>
                </td>
                <td>
                  <div>topTitle4</div>
                </td>
                <td>
                  <div>topTitle5</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="table-left">
        <div class="table-mask">
          <table>
            <tbody>
              <tr>
                <td>
                  <div>leftTitle1</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>leftTitle2</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>leftTitle3</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>leftTitle4</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>leftTitle5</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>leftTitle6</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>leftTitle7</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div>leftTitle8</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="table-right">
        <table>
          <tbody>
            <tr>
              <td>
                <div>uoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouioud</div>
              </td>
              <td>
                <div>uoifdfdfuiuiouiou</div>
              </td>
              <td>
                <div>uoiuiufdiouiou</div>
              </td>
              <td>
                <div>uoiuiufdsfsdfiouiou</div>
              </td>
              <td>
                <div>uoiuiusiouiou</div>
              </td>
            </tr>
            <tr>
              <td>
                <div>uoiuiuiouiou</div>
              </td>
              <td>
                <div>uoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiouuoifdfdfuiuiouiou</div>
              </td>
              <td>
                <div>uoiuiufdiouiou</div>
              </td>
              <td>
                <div>uoiuiufdsfsdfiouiou</div>
              </td>
              <td>
                <div>uoiuiusiouiou</div>
              </td>
            </tr>
            <tr>
              <td>
                <div>uoiuiuiouiou</div>
              </td>
              <td>
                <div>uoifdfdfuiuiouiou</div>
              </td>
              <td>
                <div>uoiuiufdiouiou</div>
              </td>
              <td>
                <div>uoiuiufdsfsdfiouiou</div>
              </td>
              <td>
                <div>uoiuiusiouiou</div>
              </td>
            </tr>
            <tr>
              <td>
                <div>uoiuiuiouiou</div>
              </td>
              <td>
                <div>uoifdfdfuiuiouiou</div>
              </td>
              <td>
                <div>uoiuiufdiouiou</div>
              </td>
              <td>
                <div>uoiuiufdsfsdfiouiou</div>
              </td>
              <td>
                <div>uoiuiusiouiou</div>
              </td>
            </tr>
            <tr>
              <td>
                <div>uoiuiuiouiou</div>
              </td>
              <td>
                <div>uoifdfdfuiuiouiou</div>
              </td>
              <td>
                <div>uoiuiufdiouiou</div>
              </td>
              <td>
                <div>uoiuiufdsfsdfiouiou</div>
              </td>
              <td>
                <div>uoiuiusiouiou</div>
              </td>
            </tr>
            <tr>
              <td>
                <div>uoiuiuiouiou</div>
              </td>
              <td>
                <div>uoifdfdfuiuiouiou</div>
              </td>
              <td>
                <div>uoiuiufdiouiou</div>
              </td>
              <td>
                <div>uoiuiufdsfsdfiouiou</div>
              </td>
              <td>
                <div>uoiuiusiouiou</div>
              </td>
            </tr>
            <tr>
              <td>
                <div>uoiuiuiouiou</div>
              </td>
              <td>
                <div>uoifdfdfuiuiouiou</div>
              </td>
              <td>
                <div>uoiuiufdiouiou</div>
              </td>
              <td>
                <div>uoiuiufdsfsdfiouiou</div>
              </td>
              <td>
                <div>uoiuiusiouiou</div>
              </td>
            </tr>
            <tr>
              <td>
                <div>uoiuiuiouiou</div>
              </td>
              <td>
                <div>uoifdfdfuiuiouiou</div>
              </td>
              <td>
                <div>uoiuiufdiouiou</div>
              </td>
              <td>
                <div>uoiuiufdsfsdfiouiou</div>
              </td>
              <td>
                <div>uoiuiusiouiou</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  
    </div>
  
    <script type="text/javascript">
      $(document).ready(function(argument) {
        var container = $("#table-container"),
            ltTable = container.find(".table-lt"),
            topTable = container.find(".table-top"),
            leftTable = container.find(".table-left"),
            rightTable = container.find(".table-right"),
  
            containerWidth = 0,
            containerHeight =0,
  
            ltTableWidth = 0,
            ltTableHeight = 0,
  
            widthJson = {},
  
            timerLT = null;
  
        ltTableWidth = ltTable.width();
        ltTable.width(ltTableWidth);
        topTable.css("marginLeft",ltTableWidth);
        leftTable.width(ltTableWidth);
        rightTable.css("marginLeft",ltTableWidth);
        ltTableHeight = ltTable.height();
        leftTable.css("marginTop",ltTableHeight+"px");
        rightTable.css("marginTop",ltTableHeight+"px");
  
        containerHeight = container.height();
        containerWidth = container.width();
        topTable.width(containerWidth - ltTableWidth - (container.innerWidth() - container[0].clientWidth));
        leftTable.height(containerHeight - ltTableHeight - (container.innerHeight() - container[0].clientHeight));
  
        // figure out the width of each DIV in TD  --start
        function setDivWidth(obj){
          $(obj).find("div").each(function(index){
            if(!widthJson[index]){
              widthJson[index] = 0;
            }
            if(widthJson[index]<$(this).width()) {
              widthJson[index] = $(this).width();
            }
          });
        }
        topTable.find("tr").each(function(){
          setDivWidth(this);
        });
        rightTable.find("tr").each(function(){
          setDivWidth(this);
        });
  
        topTable.find("tr:first div").each(function(index){
          $(this).width(widthJson[index]);
        });
        rightTable.find("tr:first div").each(function(index){
          $(this).width(widthJson[index]);
        });
        // figure out the width of each DIV in TD  --end
  
        container.scroll(function(){
          var currentScrollTop = $(this).scrollTop(),
              currentScrollLeft = $(this).scrollLeft();
          topTable.find(".table-mask").css("left", -currentScrollLeft+"px");
          leftTable.find(".table-mask").css("top", -currentScrollTop+"px");
  
        });
  
        $(document).scroll(function(){
          var currentScrollTop = $(this).scrollTop(),
              currentScrollLeft = $(this).scrollLeft();
          ltTable.css("marginTop", -currentScrollTop+"px");
          ltTable.css("marginLeft", -currentScrollLeft+"px");
          topTable.css("marginTop", -currentScrollTop+"px");
          topTable.css("marginLeft", ltTableWidth - currentScrollLeft+"px");
          leftTable.css("marginTop", ltTableHeight - currentScrollTop+"px");
          leftTable.css("marginLeft", -currentScrollLeft+"px");
  
        });
  
        // for IE, when window‘s scrollbar is moved, keep ltTable,leftTable,topTable in the correct position
        $(window).resize(function(){
          $(document).scroll();
        });
  
        //reset the width of topTable and the height of leftTable when container‘s size is changed, if container‘s size is fixed, you can skip the code below.
        timerLT = setInterval(function(){
          if(containerWidth != container.width() || containerHeight != container.height()){
            topTable.width(container.width() - ltTableWidth - (container.innerWidth() - container[0].clientWidth));
            leftTable.height(container.height() - ltTableHeight - (container.innerHeight() - container[0].clientHeight));
  
            containerWidth = container.width();
            containerHeight = container.height();
  
            container.scroll();// for IE
              
          };
                     
        },0);
  
      });
    </script>
  
  </body>
</html>

HTML 表格 - 固定和多变量列宽

】HTML表格-固定和多变量列宽【英文标题】：HTMLTable-Bothfixedandmultiplevariablecolumnwidths【发布时间】：2014-03-0606:47:00【问题描述】：我必须建立一个有5列的表格。表格宽度是可变的（内容宽度的50%）。一些列包含固定大小的按钮，... 查看详情

列隐藏时固定表格布局调整大小

】列隐藏时固定表格布局调整大小【英文标题】：fixedtablelayoutresizewhencolumnishiding【发布时间】：2011-05-1415:42:41【问题描述】：我有一个固定的表格布局，宽度为425像素。这是一个有200行的表。当用户取消选择指定列的复选框时... 查看详情

固定行跨度和表格布局时的表格列宽

】固定行跨度和表格布局时的表格列宽【英文标题】：Tablecolumnwidthwhenhavingrowspanandtable-layoutfixe【发布时间】：2018-01-2501:42:48【问题描述】：我一直在固定我的html表格的第二列的宽度。下面是我的桌子的打印屏幕：下面是CSS代码... 查看详情

水平滚动的 HTML 表格（第一列固定）

】水平滚动的HTML表格（第一列固定）【英文标题】：HTMLtablewithhorizontalscrolling(firstcolumnfixed)【发布时间】：2011-03-2501:21:52【问题描述】：我一直在想办法制作一个第一列固定的表格（表格的其余部分有水平溢出）我看到了一个有... 查看详情

如何获得固定的表格列宽

】如何获得固定的表格列宽【英文标题】：Howtogetfixedtablecolumnswidth【发布时间】：2012-01-0216:44:28【问题描述】：如何将单个表格列固定为特定宽度，以便无论该列中有多少文本，列的宽度都保持不变？<col>标签只适用... 查看详情

表格列固定

<!doctypehtml><htmldir="ltr"lang="zh-CN"><head><metacharset="utf-8"/><title>类似excel的滚动机制，当移动滚动条时固定table的第一行和第一列</title><styletype="text/css">#table-container{ 查看详情

具有固定列宽和最大高度的 CSS 表格

】具有固定列宽和最大高度的CSS表格【英文标题】：CSStablewithfixedcolumnwidthsandmaxheight【发布时间】：2019-07-3118:16:25【问题描述】：我正在尝试创建一个具有固定列宽和固定最大高度的表格，它会滚动到最大高度之外。阅读后，我... 查看详情

如何在 Flutter 中创建具有固定列的水平滚动表格？

】如何在Flutter中创建具有固定列的水平滚动表格？【英文标题】：HowtocreateahorizontallyscrollingtablewithfixedcolumninFlutter?【发布时间】：2019-11-1809:44:10【问题描述】：我想创建一系列可以垂直滚动的表格，每个表格的行数/列数可能不... 查看详情

怎样使word表格的宽度高度固定不变

以word2007为例：1、打开word文档，单击表格左上角的“表格控点”按钮选中整个表格，单击“布局”菜单，单击“属性”命令。2、在弹出的“表格属性”对话框中单击“行”选项卡，勾选“指定高度”，输入或调整高度值，将“... 查看详情

React-Table 列固定宽度破坏了整个表格

】React-Table列固定宽度破坏了整个表格【英文标题】：React-Tablecolumnfixedwidthspoilswholetable【发布时间】：2018-03-0822:22:24【问题描述】：有人可以向我解释一下为什么我不能在FirstName列上设置固定宽度吗？它设置了传递的宽度，但它... 查看详情

HTML表格列宽：结合固定和可变宽度

】HTML表格列宽：结合固定和可变宽度【英文标题】：HTMLtablecolumnwidths:combiningfixedandvariablewidths【发布时间】：2012-01-0117:14:04【问题描述】：我已经做了一个这样的表：<tablestyle="width:1000px;"><tr><td>aaa</td><tdid="spa... 查看详情

docx4j导出word文档，有表格，如何固定word表格列宽，

参考技术A选中表格，右击属性，设置一下长宽即可。或者把鼠标移至表格最左上角，出现一个表格形状的小方块，双击更改参考技术B点击表格-布局-自动调整-固定列宽查看详情

具有固定列和标题的可滚动表格，带有现代 CSS

】具有固定列和标题的可滚动表格，带有现代CSS【英文标题】：Scrollabletablewithfixedcolumnsandheader,withmodernCSS【发布时间】：2018-02-2618:28:58【问题描述】：如何使用现代CSS制作尽可能少的JavaScript表格？我想要的功能是：固定列（定... 查看详情

css表格固定列宽

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情

element-uitable表格的多表头及固定列共用

参考技术A公司的项目有这么一个需求，需要在table表格中用到多表头，以及固定列。百度了一轮以后，发现element-ui本来就不支持。需要修改源码。于是立马查看一下源码。使用固定列时，源码本来就没有考虑多表头。所以只能... 查看详情

如何在 HTML 中为表格内的列提供固定宽度？

】如何在HTML中为表格内的列提供固定宽度？【英文标题】：HowtogivefixedwidthforthecolumnsinsidetableinHTML?【发布时间】：2017-03-3005:23:03【问题描述】：P.S:请在阅读整个问题之前不要将其标记为重复我有一个table，我想为columns提供固定... 查看详情

怎么让电子表格excel在滚动拖动时行/列固定不动

如果需要滚动拖动时5行4列固定不动，那么选择E6单元格，然后在“视图”选项下的“冻结窗格”中，选择“冻结拆分窗格”，即可。参考技术A你选中B3单元格，然后视图——冻结窗口查看详情

html-table表格不被撑开，td某些列宽度固定某些列自适应

table-layout属性的解释：http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1，实现table细边框,设置如下css：table,tabletd,tableth{border:1pxsolid#ff0000;border-collapse:collapse;} 2，table表格宽度固定，同查看详情