There are at least two issues:
<th>doesn't scroll with the table body
The first column in the
tbody is frozen and won't move when user scrolls. The first column in the
thead will move, as freezing this causes several layout issues (second column disappearing under first, jagged edges on bottom of
thead when some
ths are different heights, long labels in first column of data overlying the values in other columns).
We need the first column in the
thead to be frozen as well. This causes the second column to display over the top of the first because of the absolute positioning.
One solution to this is to set the
padding-left on the second column to the same as the width of the first column. I'm working on the JS to keep these in sync when the window is resized etc.
position: sticky which solves most of the issues with absolute positioning. This is not supported on table elements in IE or Safari but I've tested these on BrowserStack and they degrade nicely to the existing behaviour so I think that's OK.
One remaining issue is that the
border-bottom between each row is missing on the first column in Firefox and Edge.
For safari you can use
position: -webkit-sticky (worked for me on safari)
The labels are very wide when the datatable is quite wide but doesn't have many columns (e.g. on the Goals Overview page, or the Search Categories report on the Site Search page). This is due to the datatable itself taking up 100% of the available width, then calculating how much the data columns need and assigning all of the excess to the label column. Not sure what the best approach here is, should we try to spread the width more evenly over the columns or should we reduce the width of the datatable?
Have tested successfully in Chrome/Firefox/Edge on Windows, Safari on MacOS, Safari on iOS, Chrome/Firefox on Android. Fails gracefully with IE or Safari on Windows, reverting to current behaviour where the whole datatable scrolls.