Move repeating rows 'add' and 'modify' buttons up or down a row within a div "table"?

Hi there. I recently put together a table that looks like this. &lt;div class="inventorytable"&gt; &nbsp; &nbsp; &lt;div class="inventorytabletoprow"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span class="inventorytableinventoryword"&gt;Inventory&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span class="inventorytableweightword"&gt;Weight&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span class="inventorytablebulkword"&gt;Bulk&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span class="inventorytablemobilityword"&gt;Mobility&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span class="inventorytableapmodword"&gt;AP Mod&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;span class="inventoryequippedword"&gt;Equipped&lt;/span&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &lt;fieldset class="repeating_inventorytableitemrepeats"&gt; &nbsp; &nbsp; &lt;div class="inventorytablerepeatinginputsrow"&gt; &nbsp; &nbsp; &lt;input type="text" name="attr_inventorytableitem" value=""&gt; &nbsp; &nbsp; &lt;input type="text" name="attr_inventorytableweight" value=""&gt; &nbsp; &nbsp; &lt;input type="text" name="attr_inventorytablebulk" value=""&gt; &nbsp; &nbsp; &lt;input type="text" name="attr_inventorytablemobiliy" value=""&gt; &nbsp; &nbsp; &lt;input type="text" name="attr_inventorytableapmod" value=""&gt; &nbsp; &nbsp; &lt;input type="checkbox" name="inventoryequippedcheck" value="inventoryequipped"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/fieldset&gt; &nbsp; &nbsp; &lt;div class="inventorytotalsrow"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="inventorytabletotalsword"&gt;Totals&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_inventorytableweighttotal" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_inventorytablebulktotal" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_inventorytablemobilitytotal" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_inventorytableapmodtotal" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_inventorytableequippedtotal" value=""&gt; &nbsp; &nbsp; &lt;/div&gt; &lt;/div&gt; After styling, at first it appears like this. <a href="https://capture.dropbox.com/yv5aSSezDGWHQ2oZ" rel="nofollow">https://capture.dropbox.com/yv5aSSezDGWHQ2oZ</a> I noticed in chrome inspect that I'm able to drag the row with the 'add' and 'modify' so that it's at the end of the table, which is much more ideal. <a href="https://www.dropbox.com/s/owszf2jh48arc6l/Screen%20Shot%202023-07-16%20at%203.38.01%20AM.png?dl=0" rel="nofollow">https://www.dropbox.com/s/owszf2jh48arc6l/Screen%20Shot%202023-07-16%20at%203.38.01%20AM.png?dl=0</a> Is there a way to do this within the character sheet code? Perhaps by targeting div.repcontrol in the css? Or is this a limitation within Roll20? Thanks!

That row is accessed by the .repcontrol class, and the repeating section name, like this .repcontrol[data-groupname=" repeating_inventorytableitemrepeats "] { /* insert styling here */ } Fiddle with it to your hearts content. Learn more here: <a href="https://cybersphere.me/styling-the-section-buttons/" rel="nofollow">https://cybersphere.me/styling-the-section-buttons/</a> and <a href="https://cybersphere.me/roll20-sheet-author-master-list/" rel="nofollow">https://cybersphere.me/roll20-sheet-author-master-list/</a>

I'll also note that you can take advantage of your html structure to target that repcontrol more easily: .inventorytable .repcontrol { /* insert styling here */ }

Awesome! I'll try this out! Edit: to clarify, I'm trying to just move the buttons down a row so they appear at the end of the table. It's good to know I can target them, but is that something you can do with css?

I'm assuming you are using css grid or css flexbox to layout your table, in which case, yes you can. Look at the order property, or the grid-areas (and grid-template-areas).

Okay great. Yes, using grid. Thanks for pointing me in that direction.

Scott C. said: I'll also note that you can take advantage of your html structure to target that repcontrol more easily: .inventorytable .repcontrol { /* insert styling here */ } That is a much simpler way to do it :)