-5

I would like to create an HTML table, where

  • the table content is scrollable in x and y direction
  • the first row is positioned sticky to the top
  • the first column is positioned sticky to the left
  • and all cells may have different heights based on their contents

Example

enter image description here

There are many examples online, that satisfy some of the requirements above but non of them satisfy the last requirement.

My Approach

1. Scrolling container

I used overflow: scroll and fixed dimensions to create a scrollable container

2. & 3. Syncing cell heights

I tried to use the flex table from css tricks to sync the height of the cells.

2. Fixing cells

In addition to that I fixed the cells with css transforms. On every scroll event I reposition the every fixed cell based on the scroll position. That approach is obviously pretty laggy. I didn't use position: fixed;, because this would break out the cells from the overflow area.

Demo: http://codepen.io/anon/pen/mREpPe?editors=0100

HaNdTriX
  • 28,732
  • 11
  • 78
  • 85
  • checkout this jquery plugin: https://datatables.net/examples/basic_init/scroll_xy.html – paolobasso Jan 13 '17 at 17:31
  • thanks @paolo.basso99 but that plugins doen't have dynamic heights neither does it have sticky columns – HaNdTriX Jan 13 '17 at 17:35
  • Yep, the height is flexible and you can use "fixed-colum" extension, checkout: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html – paolobasso Jan 13 '17 at 17:39
  • Possible duplicate of [CSS-Only Scrollable Table with fixed headers](http://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers) – Heretic Monkey Jan 13 '17 at 17:59
  • Nope that question targets only one requirement! – HaNdTriX Jan 13 '17 at 18:01
  • 3
    I was being generous. Your "question" is a work request. You should know by now that Stack Overflow is neither a code writing service nor a place you can ask for libraries. – Heretic Monkey Jan 13 '17 at 18:04
  • 1
    This was already stated above, but this is a requirements dump and attracting downvotes because you have failed to provide any coding attempt to the problem you are facing. If you had added some type of code you tried to the question, you probably wouldn't have downvotes. – Lexi Jan 13 '17 at 18:09
  • Thanks you for your feedback! I added some code in order to fix the question a bit. In addition to that I voted to close my own question. – HaNdTriX Jan 13 '17 at 18:49

1 Answers1

1

I have recently had to solve this exact problem. I found nothing out there that met my requirements, so I wrote my own.

It's not a trivial bit of code, so a bit too big to post here, but you can view / rip from here

The horizontal scroll is infinite, so you need to use the cursor keys. Might give you a good starting point?

allnodcoms
  • 1,244
  • 10
  • 14
  • Thanks for your answer the problem with your example is, that the table is not scrollable in x direction – HaNdTriX Jan 13 '17 at 17:49
  • @HaNdTriX - I had to do it that way as the horizontal rows (dates) needed to be infintely scrollable. – allnodcoms Jan 13 '17 at 17:57
  • There is an overflow on the top row, and main table body. This is currently clipped with overflow-x: hidden; and programatically scrolled with the cursor keys. Changing the overflow rule to auto would allow one of these elements to be scrolled manually, but a javascript call would e needed to match the two scrollOffset values. When those offsets 'maxed out' you could use the existing code to reset... Just a thought. – allnodcoms Jan 13 '17 at 18:04