Repeating section structure

I've been tweaking the Palladium Megaverse sheet for use in my games.&nbsp; For the most part, I have gotten to a place where the sheet does everything that I need at the moment.&nbsp; However, there is something that I didn't have a problem until some players of mine had an issue with how labels of fields display in a repeating field page of the sheet for skills.&nbsp; I realized today that the other repeating sections have the labels and input fields in the same table structure. &lt;div class="sheet-tabbed-panel"&gt; &lt;div class="sheet-row-panel"&gt; &lt;input type="checkbox" name="attr_gear-toggle" class="sheet-arrow" /&gt; &lt;h4&gt;Gear&lt;/h4&gt; &lt;div class="body"&gt; &lt;fieldset class="repeating_gear"&gt; &lt;table style="width:75%"&gt; &lt;tr&gt; &lt;td&gt;&lt;h5&gt;Item&lt;/h5&gt;&lt;/td&gt; &lt;td&gt;&lt;h5&gt;Reference&lt;/h5&gt;&lt;/td&gt; &lt;td&gt;&lt;h5&gt;Location&lt;/h5&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;div class="sheet-inventory-gear"&gt;&lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_gear_name" placeholder="Gear Name" /&gt;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="sheet-inventory-gear"&gt;&lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_gear_reference_" placeholder="Book and page numbere"/&gt;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="sheet-inventory-gear"&gt;&lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_gear_location" placeholder="Worn, pouch, bank, etc." /&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table&gt; &lt;tr&gt; &lt;textarea wrap="soft" class="sheet-textarea" value="" name="attr_gear_details" placeholder="Gear Details" /&gt;&lt;/textarea&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; The repeating skills section has the labels in a separate table: &lt;div class="sheet-tabbed-panel"&gt; &lt;div class="sheet-row-panel"&gt; &lt;input type="checkbox" name="attr_OCC-Skill-toggle" class="sheet-arrow" /&gt; &lt;h4&gt;Occupational Class Skills&lt;/h4&gt; &lt;div class="body"&gt; &lt;table style="width:90%"&gt; &lt;tr&gt; &lt;td style="width:10%"&gt;&lt;/td&gt; &lt;td style="width:25%"&gt;&lt;h5&gt;Name&lt;/h5&gt;&lt;/td&gt; &lt;td style="width:8%"&gt;&lt;h5&gt;Rating&lt;/h5&gt;&lt;/td&gt; &lt;td style="width:10%"&gt;&lt;h5&gt;Skill Level&lt;/h5&gt;&lt;/td&gt; &lt;td&gt;&lt;h5&gt;Notes&lt;/h5&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;fieldset class="repeating_skillocc"&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;div class="sheet-ability"&gt;&lt;button type="roll" value="&amp;{template:custom} {{color=green}} {{title=**@{character_name}'s**}} {{subtitle=@{skill_name}}} {{Check=[[d100cs&lt;1cf&gt;100]]}} {{Skill=@{skill_rating}}} {{desc=@{skill_reference}}}"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="sheet-ability"&gt;&lt;input class="sheet-input-center-aligned" type="text" style="width:220px" value="" name="attr_skill_name" placeholder="Skill name"/&gt;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="sheet-ability"&gt;&lt;input class="sheet-input-center-aligned" type="number" value="" name="attr_skill_rating" /&gt;&lt;b&gt;%&lt;/b&gt;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="sheet-ability"&gt;&lt;input class="sheet-input-center-aligned" type="number" style="width:60px" value="+" name="attr_skill_level" /&gt;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="sheet-ability"&gt;&lt;input class="sheet-input-center-aligned" type="text" style="width:300px" value="" name="attr_skill_reference" /&gt;&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; This works just fine if your character sheet opens in the specific width the sheet was designed for, but if you have a wider aspect monitor the labels are not at all lined up with the correct labels, because they will stretch with the sheet width.&nbsp; When I realized how the table structure was different, I tried building that section the the others.&nbsp; However, the skills section is usually going to have the most "repeats" of the field lines.&nbsp; If the labels are duplicated with each entry, then it starts building up a lot of sheet length with a character that has a lot of skills.&nbsp; So, how do I go about fixing this?&nbsp; While I might leave the inventory repeating sections alone, I have a couple other repeating field sections that would be just fine with having the column labels once at the top and the input fields stretching down below.&nbsp; Is this something that should be handled by relabeling things to reference in css?&nbsp; Any advice for an ignorant sheet editor? My current sheet as I am using it in my games can be found here:&nbsp; <a href="https://drive.google.com/drive/folders/1erd8gNQb1q8uPJghlYKXWCL9I6XZIdmZ" rel="nofollow">https://drive.google.com/drive/folders/1erd8gNQb1q8uPJghlYKXWCL9I6XZIdmZ</a> The original sheet I have been editing is here:&nbsp; <a href="https://github.com/Roll20/roll20-character-sheets/tree/master/Palladium%20Megaverse" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/tree/master/Palladium%20Megaverse</a> And if I can get an image to load, I will insert an image of what I want to avoid.&nbsp; For me, it looks like this: But for a couple of my players, it starts out looking like this without them resizing the sheet.

You've got multiple problems here. The biggest one is that you are using relative units (percentage) in one table, but using fixed units (pixels) in another table. You need to standardize which one you're going to use. I might also recommend some code changes, and finally if you have the time/inclination I'd really recommend getting rid of the table structure and using something like css grid or flexbox instead. Here's the code changed to take all of this into account: HTML &lt;div class="sheet-tabbed-panel"&gt; &lt;div class="sheet-row-panel"&gt; &lt;input type="checkbox" name="attr_OCC-Skill-toggle" class="sheet-arrow" /&gt; &lt;h4&gt;Occupational Class Skills&lt;/h4&gt; &lt;div class="body"&gt; &lt;div class='ooc-grid-container' style="width:90%"&gt; &lt;div class='space-holder'&gt;&lt;/div&gt; &lt;h5&gt;Name&lt;/h5&gt; &lt;h5&gt;Rating&lt;/h5&gt; &lt;div class='percent-space'&gt;&lt;/div&gt; &lt;h5&gt;Skill Level&lt;/h5&gt; &lt;h5&gt;Notes&lt;/h5&gt; &lt;fieldset class="repeating_skillocc"&gt; &lt;button type="roll" value="&amp;{template:custom} {{color=green}} {{title=**@{character_name}'s**}} {{subtitle=@{skill_name}}} {{Check=[[d100cs&lt;1cf&gt;100]]}} {{Skill=@{skill_rating}}} {{desc=@{skill_reference}}}"&gt;&lt;/button&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_name" placeholder="Skill name"/&gt; &lt;input class="sheet-input-center-aligned" type="number" value="" name="attr_skill_rating" /&gt;&lt;b&gt;%&lt;/b&gt; &lt;input class="sheet-input-center-aligned" type="number" value="+" name="attr_skill_level" /&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_reference" /&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; CSS &nbsp;Note that you will need to add specificity to these css declarations based on your sheet setup. .repcontainer, .repitem{ display:contents; } .repcontrol{ grid-column:1 / -1; } .sheet-ooc-grid-container{ display:grid; grid-template-columns: 1fr 2.5fr 0.8fr 0.2fr 1fr 4.5fr;/*I'd really recommend probably changing some of these unit values, but this should be a match to the relative units you already had*/ } All of this gives the following output: And, it all scales with the width of the sheet: Note that if you shrink it to much, it does collapse, so I'd suggest adding some minmax() in the css declarations. You could also make the inputs scalable along with their column.

I thought this might be something that would require an extensive edit.&nbsp; Other than that display issue, the sheet is working, so I can leave it as is in my existing games.&nbsp; I've created a new game specifically for this stage of sheet messing.&nbsp; I've noticed forum posts recommending doing away with the html tables, so I sort of expected to be told there should be a fair bit of work done.&nbsp; I did wonder about the labels using the % spacing, and why that was different than anywhere else.&nbsp; That is the way the original sheet was written, so I assumed that would have to change. I will play around with this and should be able to apply it to all of my repeating sections.&nbsp; What I am most worried about (as far as a rewrite goes) is restructuring the first page, but I can save that for after I have this part situated.&nbsp; I expect I will have more questions eventually.&nbsp; Thanks for the help so far!

Ok, I'm bringing this back up to the top because I have had a little time now to mess with that code.&nbsp; It looks good until I hit the modify button on the repeating section.&nbsp; Add works fine, but the modify brings up one handle at the start of the repeating section with an opaque overlay that covers the entire sheet starting at the top of the repeating section.&nbsp; It has only the one handle (not one for each line) and covers the Done button, so the only way to get rid of it is to close and reopen the character sheet.&nbsp; Is that something that comes from a problem with html or css?&nbsp; It behaves the same way if I wipe the rest of the sheet and only have that batch of html and css code.

This is what I am seeing.&nbsp; Has anyone had this happen before and have an idea what might be the cause?&nbsp; As you can see, one handle is there, but the layer that it is attached to is the entire sheet, covering all lines including the Done button.&nbsp; It goes to the edge of the character sheet window to the right and bottom.&nbsp; This is with the code Scot posted above.&nbsp; Add works, but this is what happens when you hit the modify button.

I would guess that you have an unclosed element somewhere so that the html doesn't know where the item ends.

Ok, but this is just your code.&nbsp; I wiped the sheet after it did this with the rest of the sheet to see if this section worked on it's own.&nbsp; I'm not seeing anything wrong/unclosed in what you posted, but it doesn't seem to work.

Try this: &lt;fieldset class="repeating_skillocc"&gt; &lt;div class='ooc-grid-container' style="width:90%"&gt; &lt;button type="roll" value="&amp;{template:custom} {{color=green}} {{title=**@{character_name}'s**}} {{subtitle=@{skill_name}}} {{Check=[[d100cs&lt;1cf&gt;100]]}} {{Skill=@{skill_rating}}} {{desc=@{skill_reference}}}"&gt;&lt;/button&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_name" placeholder="Skill name"/&gt; &lt;input class="sheet-input-center-aligned" type="number" value="" name="attr_skill_rating" /&gt;&lt;b&gt;%&lt;/b&gt; &lt;input class="sheet-input-center-aligned" type="number" value="+" name="attr_skill_level" /&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_reference" /&gt; &lt;/div&gt; &lt;/fieldset&gt; I've found that fieldsets mess up flex containers, because they add stuff like divs for the rep items and controls, etc. &nbsp;So, those things may inherit the flex properties for where they reside...

Ah, it looks like the itemcontrol div is styled to take up 100% of the width and height of its container, which with display: contents; is the ooc-grid-container div. Not sure if there's a way to fix that. Sorry about that kraynic. You're going to have to do what finderski shows and set the .repcontainer and .repitem to have 0 padding, margin, and border so that everything will line up.

Hmm, I'll fiddle with it some.&nbsp; At first attempt, plugging in that fieldset makes my repeating field go sideways. I did also try making it a separate grid container, but then the labels don't line up.&nbsp; I'll fiddle with the .repitem and .repcontainer and see what happens.

Working for now.&nbsp; I may have another question later after I have had time to mess with this a little more, but the repeating sections and add/modify buttons are working.&nbsp; Thanks for the help!

What code did you use to get it working properly?

I will preface this by saying that I changed the variable grid widths to fixed, because the sizes of the input fields seem to be fixed.&nbsp; This means that allowing the grid to stretch as you widen a sheet window just leaves larger gaps between input fields on the sheet.&nbsp; I plan on messing with things to see about getting the input fields to stretch, or at least make the skill name and note sections longer, but that is something for later after I have the structure of my sheet done. The current skills tab of my character sheet code looks like this. &lt;div class="sheet-tab-content sheet-tab3"&gt; &lt;h1&gt;Skills&lt;/h1&gt; &lt;button type="roll" value="&amp;{template:custom} {{color=green}} {{title=**@{character_name}}} {{subtitle=?{What Skill?|No Reason}}} {{Check=[[1d100]]}}" &gt;&lt;/button&gt; Universal Skill Roll &lt;div class="sheet-tabbed-panel"&gt; &lt;div class="sheet-row-panel"&gt; &lt;input type="checkbox" name="attr_OCC-Skill-toggle" class="sheet-arrow" /&gt; &lt;h4&gt;Occupational Class Skills&lt;/h4&gt; &lt;div class="body"&gt; &lt;div class='skill-grid-container' style="width:90%"&gt; &lt;div class='space-holder'&gt;&lt;/div&gt; &lt;h5&gt;Name&lt;/h5&gt; &lt;h5&gt;Rating&lt;/h5&gt; &lt;div class='percent-space'&gt;&lt;/div&gt; &lt;h5&gt;Skill Level&lt;/h5&gt; &lt;h5&gt;Notes&lt;/h5&gt; &lt;/div&gt; &lt;fieldset class="repeating_skillocc"&gt; &lt;div class='skill-grid-container' style="width:90%"&gt; &lt;button type="roll" value="&amp;{template:custom} {{color=green}} {{title=**@{character_name}'s**}} {{subtitle=@{skill_name}}} {{Check=[[d100cs&lt;1cf&gt;100]]}} {{Skill=@{skill_rating}}} {{desc=@{skill_reference}}}"&gt;&lt;/button&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_name" placeholder="Skill name"/&gt; &lt;input class="sheet-input-center-aligned" type="number" value="" name="attr_skill_rating" /&gt;&lt;b&gt;%&lt;/b&gt; &lt;input class="sheet-input-center-aligned" type="number" value="1" name="attr_skill_level" /&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_reference" /&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-tabbed-panel"&gt; &lt;div class="sheet-row-panel"&gt; &lt;input type="checkbox" name="attr_Elective-Skill-toggle" class="sheet-arrow" /&gt; &lt;h4&gt;Elective Skills&lt;/h4&gt; &lt;div class="body"&gt; &lt;div class='skill-grid-container' style="width:90%"&gt; &lt;div class='space-holder'&gt;&lt;/div&gt; &lt;h5&gt;Name&lt;/h5&gt; &lt;h5&gt;Rating&lt;/h5&gt; &lt;div class='percent-space'&gt;&lt;/div&gt; &lt;h5&gt;Skill Level&lt;/h5&gt; &lt;h5&gt;Notes&lt;/h5&gt; &lt;/div&gt; &lt;fieldset class="repeating_skillelective"&gt; &lt;div class='skill-grid-container' style="width:90%"&gt; &lt;button type="roll" value="&amp;{template:custom} {{color=green}} {{title=**@{character_name}'s**}} {{subtitle=@{skill_name}}} {{Check=[[d100cs&lt;1cf&gt;100]]}} {{Skill=@{skill_rating}}} {{desc=@{skill_reference}}}"&gt;&lt;/button&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_name" placeholder="Skill name"/&gt; &lt;input class="sheet-input-center-aligned" type="number" value="" name="attr_skill_rating" /&gt;&lt;b&gt;%&lt;/b&gt; &lt;input class="sheet-input-center-aligned" type="number" value="1" name="attr_skill_level" /&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_reference" /&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-tabbed-panel"&gt; &lt;div class="sheet-row-panel"&gt; &lt;input type="checkbox" name="attr_Secondary-Skill-toggle" class="sheet-arrow" /&gt; &lt;h4&gt;Secondary Skills&lt;/h4&gt; &lt;div class="body"&gt; &lt;div class='skill-grid-container' style="width:90%"&gt; &lt;div class='space-holder'&gt;&lt;/div&gt; &lt;h5&gt;Name&lt;/h5&gt; &lt;h5&gt;Rating&lt;/h5&gt; &lt;div class='percent-space'&gt;&lt;/div&gt; &lt;h5&gt;Skill Level&lt;/h5&gt; &lt;h5&gt;Notes&lt;/h5&gt; &lt;/div&gt; &lt;fieldset class="repeating_skillsecondary"&gt; &lt;div class='skill-grid-container' style="width:90%"&gt; &lt;button type="roll" value="&amp;{template:custom} {{color=green}} {{title=**@{character_name}'s**}} {{subtitle=@{skill_name}}} {{Check=[[d100cs&lt;1cf&gt;100]]}} {{Skill=@{skill_rating}}} {{desc=@{skill_reference}}}"&gt;&lt;/button&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_name" placeholder="Skill name"/&gt; &lt;input class="sheet-input-center-aligned" type="number" value="" name="attr_skill_rating" /&gt;&lt;b&gt;%&lt;/b&gt; &lt;input class="sheet-input-center-aligned" type="number" value="1" name="attr_skill_level" /&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_reference" /&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-tabbed-panel"&gt; &lt;div class="sheet-row-panel"&gt; &lt;input type="checkbox" name="attr_Mystic-Skill-toggle" class="sheet-arrow" /&gt; &lt;h4&gt;Mystic Skills&lt;/h4&gt; &lt;div class="body"&gt; &lt;div class='skill-grid-container' style="width:90%"&gt; &lt;div class='space-holder'&gt;&lt;/div&gt; &lt;h5&gt;Name&lt;/h5&gt; &lt;h5&gt;Rating&lt;/h5&gt; &lt;div class='percent-space'&gt;&lt;/div&gt; &lt;h5&gt;Skill Level&lt;/h5&gt; &lt;h5&gt;Notes&lt;/h5&gt; &lt;/div&gt; &lt;fieldset class="repeating_skillmystic"&gt; &lt;div class='skill-grid-container' style="width:90%"&gt; &lt;button type="roll" value="&amp;{template:custom} {{color=green}} {{title=**@{character_name}'s**}} {{subtitle=@{skill_name}}} {{Check=[[d100cs&lt;1cf&gt;100]]}} {{Skill=@{skill_rating}}} {{desc=@{skill_reference}}}"&gt;&lt;/button&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_name" placeholder="Skill name"/&gt; &lt;input class="sheet-input-center-aligned" type="number" value="" name="attr_skill_rating" /&gt;&lt;b&gt;%&lt;/b&gt; &lt;input class="sheet-input-center-aligned" type="number" value="1" name="attr_skill_level" /&gt; &lt;input class="sheet-input-center-aligned" type="text" value="" name="attr_skill_reference" /&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; .repcontainer, .repitem{ margin 0 border 0 padding 0 display:contents; } .repcontrol{ grid-column:1 / -1; } .sheet-skill-grid-container{ display:grid; grid-template-columns: 30px 213px 50px 15px 50px 350px; }