fix(table): change thead to sticky position with z-index

[virkt25]

This change makes thead stick to the top of the table container and ensures the elements in thead are visible as the table body is scrolled. Also allows for horizontal scrolling while honouring the sticky header.

Changelog

Changed

• thead now uses position: sticky instead of position: fixed
• thead has a z-index of 1

Testing / Reviewing

• Create a table with a sticky header and enough data to cause scrolling (in both directions)

[netlify]

Deploy preview for carbon-elements ready!

Built with commit aec5231

https://deploy-preview-5887--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit aec5231

https://deploy-preview-5887--carbon-components-react.netlify.app

[tw15egan]

Getting a lot of top padding when enabling sticky header

Also, as a heads up, doesn't seem like position: sticky is supported in IE11, so we'd better make sure we have some fallbacks there

Ref: https://caniuse.com/#search=position%3A%20sticky

[virkt25]

@tw15egan Fixed the padding issue. Carbon still supports IE11 😱 ? I don't think Microsoft even supports IE11 anymore. Carbon should consider just supporting evergreen browsers.

[tw15egan]

@virkt25 at the moment we're still supporting IE11, but hopefully for not too much longer 😅

It doesn't look like the old sticky header functionality worked in IE11 anyways, so since it's an experimental feature I'm fine with keeping it like this 👍