在表格HTML / CSS / JS中冻结页脚（总行）

Question

我正在使用JSgrid并尝试冻结页脚（总行）。没有分页，因此，每当从数据库添加新行时，它都应滚动显示，并且页脚（总行）应保持静态（位置：固定）。我尝试应用位置z索引，但似乎我在某处出错。请帮帮我。

我的代码如下：

    var data = [
        {
            "Name": "Product",
            "Sum": 10
        },
        {
            "Name": "Another Product",
            "Sum": 20
        },
        {
            "Name": "Third Product",
            "Sum": 30
        },
         {
            "Name": "Third Product",
            "Sum": 30
        },
         {
            "Name": "Third Product",
            "Sum": 30
        },
         {
            "Name": "Third Product",
            "Sum": 30
        },
         {
            "Name": "Third Product",
            "Sum": 30
        },
         {
            "Name": "Third Product",
            "Sum": 30
        }
    ];
    
    $("#jsGrid").jsGrid({
            width: "100%",
            height: "270px",
     
            autoload: true,
            inserting: true,
     
            controller: {
            	loadData: function() {
              	return data;
              }
            },
            
            onRefreshed: function(args) {
            	var items = args.grid.option("data");
              var total = { Name: "Total", "Sum": 0, IsTotal: true };
              
              items.forEach(function(item) {
              	total.Sum += item.Sum;
              });
              
              var $totalRow = $("<tr>").addClass("total-row");
              
              args.grid._renderCells($totalRow, total);
              
              args.grid._content.append($totalRow);
            },
            
            fields: [
                { name: "Name", title:"Product", type: "text", width: "60%", validate: "required" },
                { name: "Sum", title:"Sum", type: "number", width: "30%", validate: "required" },
                { type: "control", width: "10%", editButton: false, 
                	itemTemplate: function(_, item) {
                    if(item.IsTotal)
                    	return "";
                    return jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);  
                  }
                }
            ]
        });

    body {
      background: #fff;  
    }
    
    .jsgrid-cell { 
        overflow: hidden; 
    }
    
    .jsgrid-pager { text-align: center; }
    
    .total-row {
      font-weight: bold;
    }
    
    .total-row td {
      border-top: 2px solid #efefef;
    }

<div id="jsGrid"></div>