mkoryak/floatThead

Quickstart guide

Pascal666 opened this issue · 2 comments

Pascal666 commented

It would be nice if there was a quickstart guide. I feel like the docs at https://mkoryak.github.io/floatThead/ just kinda threw me into the deep end. There are no basic examples in sight.

After many hours, I finally figured out this as a bare minimum:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.1.4/jquery.floatThead.min.js"></script>
<script type="text/javascript">
$('table').floatThead();
</script>

Unfortunately, that leaves the text of the body visible behind the thead. Adding bgcolor='white' to the thead's tr makes the thead text readable, but there is still some body text showing at the very top above the thead. This is really distracting on a real webpage, but barely visible on JSFiddle: https://jsfiddle.net/Pascal666/4L0xeb3h/

Pascal666 commented

Looks like I just wasted a bunch of time on this plugin. I don't need it at all. Adding the below to my head did everything I need. Oh well. Perhaps a quickstart guide will help someone else.

<style type="text/css">
table thead tr th {
  background-color: white;
  position: sticky;
  z-index: 100;
  top: 0;
}
</style>

JSFiddle: https://jsfiddle.net/Pascal666/c981j75d/

mkoryak commented