修复了可调整大小的 HTML 表上的标题，包括自动水平滚动溢出

问题描述

我使用以下示例作为指南构建了一个 html 表，但是我一直无法弄清楚如何使头部固定，以便在用户滚动时保持可见：

https://jsfiddle.net/thatOneGuy/u5bvwh8m/16/

我尝试过使用 CSS 来控制

.resizable{overflow-y: auto; position: sticky; height: 750px;}

我也尝试向头部添加自定义样式，但这会破坏调整大小：

table thead tr{
    display:block;
}

table th,table td{
    width:100px;//fixed width
}


table  tbody{
  display:block;
  height:200px;
  overflow:auto;//set tbody to auto
}

非常感谢任何帮助。

解决方法

试试这个

   {
    "amount": 0.2,"direction": "IN","fromNetwork": "ETH","source":"","symbol":"ETH","toAddress":"my wallet address","toAddressLabel":"","toNetwork":"BSC","walletAddress": "my wallet address","walletNetwork": "ETH"
 }

并从 thead th{ position: sticky !important; top: 0; background-color: white; } 标签中删除 resizable 类并将其放入 table 和 thead 标签

tbody

<table id="tableId" >
   <thead class="resizable">
    ...
   <tbody class="resizable">

//var tables = document.getElementsByClassName('flexiCol');
var tables = document.getElementsByClassName('resizable');
for (var i = 0; i < tables.length; i++) {
  resizableGrid(tables[i]);
}

function resizableGrid(table) {
  var row = table.getElementsByTagName('tr')[0],cols = row ? row.children : undefined;
  if (!cols) return;

  table.style.overflow = 'hidden';

  var tableHeight = table.offsetHeight;

  for (var i = 0; i < cols.length; i++) {
    var div = createDiv(tableHeight);
    cols[i].appendChild(div);
    cols[i].style.position = 'relative';
    setListeners(div);
  }

  function setListeners(div) {
    var pageX,curCol,nxtCol,curColWidth,nxtColWidth,tableWidth;

    div.addEventListener('mousedown',function(e) { 
    
        tableWidth = document.getElementById('tableId').offsetWidth;
      curCol = e.target.parentElement;
      nxtCol = curCol.nextElementSibling;
      pageX = e.pageX;

      var padding = paddingDiff(curCol);

      curColWidth = curCol.offsetWidth - padding;
    //  if (nxtCol)
        //nxtColWidth = nxtCol.offsetWidth - padding;
    });

    div.addEventListener('mouseover',function(e) {
      e.target.style.borderRight = '2px solid #0000ff';
    })

    div.addEventListener('mouseout',function(e) {
      e.target.style.borderRight = '';
    })

    document.addEventListener('mousemove',function(e) {
      if (curCol) {
        var diffX = e.pageX - pageX;

       // if (nxtCol)
          //nxtCol.style.width = (nxtColWidth - (diffX)) + 'px';

        curCol.style.width = (curColWidth + diffX) + 'px';
        console.log(curCol.style.width)
        console.log(tableWidth)
        document.getElementById('tableId').style.width = tableWidth + diffX + "px"
      }
    });

    document.addEventListener('mouseup',function(e) {
      curCol = undefined;
      nxtCol = undefined;
      pageX = undefined;
      nxtColWidth = undefined;
      curColWidth = undefined
    });
  }

  function createDiv(height) {
    var div = document.createElement('div');
    div.style.top = 0;
    div.style.right = 0;
    div.style.width = '5px';
    div.style.position = 'absolute';
    div.style.cursor = 'col-resize';
    div.style.userSelect = 'none';
    div.style.height = height + 'px';
    return div;
  }

  function paddingDiff(col) {

    if (getStyleVal(col,'box-sizing') == 'border-box') {
      return 0;
    }

    var padLeft = getStyleVal(col,'padding-left');
    var padRight = getStyleVal(col,'padding-right');
    return (parseInt(padLeft) + parseInt(padRight));

  }

  function getStyleVal(elm,css) {
    return (window.getComputedStyle(elm,null).getPropertyValue(css))
  }
};

 * {
    box-sizing: border-box;
  }

  table {
    border-collapse: collapse;
  }

  td,th {
    padding: 5px 15px;
    text-align: left;
  }

  table,th,td {
    border: 1px solid #000;
  }
   
  thead th  { 
      position: sticky !important;
      top: 0;
      background-color: white;
    }