HTML表带有粘性页眉，页脚，列和可滚动的正文（X和Y）

Question

I'm developing HTML table (inside React application) with a whole range of sticky elements: header, footer, first column (I'm using position: sticky; to make it works). Table is closed inside container with known dimensions, and allow user to scroll in X and Y directions (see my JSFiddle https://jsfiddle.net/aypLr936/ - it's only the mock up). Currently I'm trying to 'migrate' with scrolling area (X and Y) inside tbody (something like https://datatables.net/examples/basic_init/scroll_xy.html ). I've tried to implement solutions from HTML table with 100% width, with vertical scroll inside tbody but it doesn't work in my conditions. I'm just wondering if it possible to make it works without breaking existing functionality (table has also an option to resize columns, which must work after changes, resizable columns must overflow parent container [not resize sibling columns]).

One other approach I tried is to separate table into 3: one for thead, one for tbody, one for tfoot. But in this case there is an issue with horizontal scroll (thead and tfoot don't follow tbody position). Maybe is there any way to create linkage between different table scroll position?

I will be very grateful for all tips, suggestions, cheers J.

Answer 1

Update: I found solution which satisfy me for this very moment. Actually there is a way to create two separate divs with table parts and couple them by scroll position (it can be done by pure JS). I think it's similiar solution to https://datatables.net/examples/basic_init/scroll_xy.html . I developed something like this (inside my React app):

<div id="thead_scroll" style={{overflowX: 'hidden'}}>
  <table>
    <thead> 
       ...
    </thead>
  </table>
</div>
<div id="tbody_scroll" style={{overflowX: 'auto', maxHeight: 500}} onScroll={this.handleBodyScroll}>
  <table>
    <tbody> 
       ...
    </tbody>
  </table>
</div>

Event is handled in this way:

handleBodyScroll(event) {
  const tbody = document.getElementById('tbody_scroll');
  const thead = document.getElementById('thead_scroll');
  thead.scrollLeft = tbody.scrollLeft;
}

We are operating directly on DOM and scrolling looks smoothly. In this solution header is always above tbody, another elements may be sticky . One last issue I've noticed is scrollbar position which makes minor displacement in extreme position (max X), but I hope it can be solved by some measurement...

Answer 2

the other day I saw exactly what you want, a "Table with fluid height and width, fixed header, footer and first column using position:sticky" that is pure css:

https://codepen.io/paulobrien/pen/LBrMxa

Quote: This example uses position:sticky on the th elements in the thead, tfoot and left column to achieve the fixed effect. ... Resize browser smaller to see fixed first column.

I can't copy the whole pen so you have to look at it your self and make your own stand alone to play with.

Then, to also get the column resize in that pen, just add the resize and overflow in this ruleblock at line 38 - 43:

.table-scroll thead th {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  resize: horizontal; /* add */
  overflow: auto; /* add */
}