mkoryak / floatThead

Fixed <thead>. Doesn't need any custom css/html. Does what position:sticky can't
https://mkoryak.github.io/floatThead/
MIT License
1.22k stars 198 forks source link

Quickstart guide #453

Closed Pascal666 closed 4 years ago

Pascal666 commented 4 years ago

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 4 years ago

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 4 years ago

Yes sticky position will cure some of your problems. I should make a guide about what this plugin solves that position:sticky can not.

I digress; thank you for taking the time to make a guide. I cannot make one because I have not been diving into any deep ends for a long time. I don't mean to sound like a jerk either. I really have no idea what a new jQuery programmer wants to see.

On Sat, Dec 28, 2019, 6:55 PM Pascal666 notifications@github.com wrote:

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.

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

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mkoryak/floatThead/issues/453?email_source=notifications&email_token=AAC5WSN3HHHX6Q3ZZXCFVZLQ27RQPA5CNFSM4KATM6P2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHYUO6Q#issuecomment-569460602, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAC5WSNWHAPEQZQQF2R4V6TQ27RQPANCNFSM4KATM6PQ .