Is it possible to have the Column Headers for a Repeating Section be fixed position and not scroll?

I am a total noob at HTML5 and CSS but have been tinkering around with it for about a year now. The character sheet I am working on is the GURPS sheet. We have 3 Repeating Sections (Inventory, Skills, and Grimoire (spells). These sections can get very long and the Headers scroll off the top of the page thus making it difficult to identify the fields, especially for the Grimoire. Is there a way to make these Headers fixed and not scroll with the section? I have done some searching on the Internet and they provide a number of possible CSS, HTML5, and JavaScript solutions but they are all way above my head. I figured this most not be easy as I have not seen other sheets doing this. Thanks for any help or guidance on this.

Yes.  The header needs to be made outside of the repeating field, and you will need to fiddle with the css to get the items to line up, but its not real hard. As long as you use the same method (grid, strongly controlled row and item widths, etc) to make the header as you did to create the repeating field, you should be find.  If you are using a table...it will be more difficult.  There is a slight difference in how a table is handled in and outside of a repeating field.  If you need an example, I can work one up. 

If you are using css grid, you can reference the same grid for the headers as the repeating section.  That makes sure they line up. <div class='melee-grid-container' > <h5>Weapon</h5> <h5>Skill Lvl</h5> <h5>Strike</h5> <h5>Parry</h5> <h5>Throw</h5> <h5>Range</h5> <fieldset class="repeating_weaponmelee"> <div class='melee-grid-container' > <input class='melee-field' type="text" value="" name="attr_melee_weapon_name" placeholder="Weapon Type" /> <input class='melee-field' type="number" title='Proficiency Skill Level' value="1" name="attr_melee_weapon_skill_level" /> <input class='melee-field' type="number" title='Proficiency Strike Bonus' value="0" name="attr_melee_weapon_strike" /> <input class='melee-field' type="number" title='Proficiency Parry Bonus' value="0" name="attr_melee_weapon_parry" /> <input class='melee-field' type="number" title='Proficiency Throw Bonus' value="0" name="attr_melee_weapon_throw" /> <input class='melee-field' type="number" title='Proficiency Throw Range (if any)' value="0" name="attr_melee_weapon_range" /> </div> </fieldset> </div> .sheet-melee-grid-container{ display:grid; grid-template-columns: 213px 50px 50px 50px 50px 50px } A small repeating section from my little sheet.  The 2 references to the grid should be all you need to get everything to line up.  From there it is just messing with the column widths.

@Kraynic I think you mean something like this? <div class='melee-grid-container'> <h5>Weapon</h5> <h5>Skill Lvl</h5> <h5>Strike</h5> <h5>Parry</h5> <h5>Throw</h5> <h5>Range</h5> </div> <fieldset class="repeating_weaponmelee"> <div class='melee-grid-container'> <input class='melee-field' type="text" value="" name="attr_melee_weapon_name" placeholder="Weapon Type" /> <input class='melee-field' type="number" title='Proficiency Skill Level' value="1" name="attr_melee_weapon_skill_level" /> <input class='melee-field' type="number" title='Proficiency Strike Bonus' value="0" name="attr_melee_weapon_strike" /> <input class='melee-field' type="number" title='Proficiency Parry Bonus' value="0" name="attr_melee_weapon_parry" /> <input class='melee-field' type="number" title='Proficiency Throw Bonus' value="0" name="attr_melee_weapon_throw" /> <input class='melee-field' type="number" title='Proficiency Throw Range (if any)' value="0" name="attr_melee_weapon_range" /> </div> </fieldset> Otheriwse I don't see how this would work as intended...

Question for the css experts: you you need that inner div on the fieldset? can you do this?                 <fieldset class="repeating_weaponmelee melee-grid-container"> <input class='melee-field' type="text" value="" name="attr_melee_weapon_name" placeholder="Weapon Type" /> <input class='melee-field' type="number" title='Proficiency Skill Level' value="1" name="attr_melee_weapon_skill_level" /> <input class='melee-field' type="number" title='Proficiency Strike Bonus' value="0" name="attr_melee_weapon_strike" /> <input class='melee-field' type="number" title='Proficiency Parry Bonus' value="0" name="attr_melee_weapon_parry" /> <input class='melee-field' type="number" title='Proficiency Throw Bonus' value="0" name="attr_melee_weapon_throw" /> <input class='melee-field' type="number" title='Proficiency Throw Range (if any)' value="0" name="attr_melee_weapon_range" /> </fieldset>

I would not recommend doing it, having an inner div is much cleaner, but you can do it; you could add an extra selector to target the .repitem divs: .sheet-melee-grid-container, .repcontainer[data-groupname="repeating_weaponmelee"] .repitem { display:grid; grid-template-columns: 213px 50px 50px 50px 50px 50px; } My vote would go to the inner div every time, though. EDIT: Oh, I didn't see your extra class "melee-grid-container" there. No, that definitely will not  work like you think it will, because of the way repeating sections are rendered as HTML .

Jakob said: Otheriwse I don't see how this would work as intended... Well, maybe it should be set up that way, but I have 8 different repeating sections all set up the way I showed.  They all work.  Maybe it is like Bugs Bunny not learning about gravity yet?

Jakob said: I would not recommend doing it, having an inner div is much cleaner, but you can do it; you could add an extra selector to target the .repitem divs: .sheet-melee-grid-container, .repcontainer[data-groupname="repeating_weaponmelee"] .repitem { display:grid; grid-template-columns: 213px 50px 50px 50px 50px 50px; } My vote would go to the inner div every time, though. EDIT: Oh, I didn't see your extra class "melee-grid-container" there. No, that definitely will not  work like you think it will, because of the way repeating sections are rendered as HTML . Thanks, i forgot about the way repeating sections are rendered. :)

Kraynic said: Jakob said: Otheriwse I don't see how this would work as intended... Well, maybe it should be set up that way, but I have 8 different repeating sections all set up the way I showed.  They all work.  Maybe it is like Bugs Bunny not learning about gravity yet? Sounds just like that! More seriously, what should happen in your setup is that the .repcontainer div is forced into the first grid column and so becomes 213px wide, and the .repcontrol goes into the second column and becomes 50px wide next to it. I'm not exactly sure why this would work for you, but .. well.

Jakob said: Kraynic said: Jakob said: Otheriwse I don't see how this would work as intended... Well, maybe it should be set up that way, but I have 8 different repeating sections all set up the way I showed.  They all work.  Maybe it is like Bugs Bunny not learning about gravity yet? Sounds just like that! More seriously, what should happen in your setup is that the .repcontainer div is forced into the first grid column and so becomes 213px wide, and the .repcontrol goes into the second column and becomes 50px wide next to it. I'm not exactly sure why this would work for you, but .. well. Yeah, I am going to chalk that up to me being so ignorant it works.  I have been attempting some cosmetic changes to my sheet, so I might as well change those around to the "correct" way of doing things while I am at it.

wow this is why I love this forum. Thank you for all of the input. I am hoping that the coder , and user, that I work with can sort this all out. Thanks so very much! Mike