Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Repeating Sections in Tables

Hi, I'm slowly getting to grips with using HTML in roll20. I have been using tables to format most of my information segments (if this isn't the way to go about it please do tell me) but I have come to a point where I want the user to be able to add and remove rows from the table. Repeating sections have this function and I have got one to work, but I don't know how to make it work while in the table itself. Any help would be appreciated, thanks!
1605066801
GiGs
Pro
Sheet Author
API Scripter
Repeating sections dont work well with tables IIRC, and since you said this: George B. said: I have been using tables to format most of my information segments (if this isn't the way to go about it please do tell me)  let me tell you that isnt the way to go. In fact roll20 wont accept a sheet that uses tables for layout, so if you are intending to share you sheet with the community, you'll need to change your approach. It's a good idea to dump tables anyway, and rpelace them with something like a CSS Grid approach.  Grid is excellent for creating table-like layouts. For example, imagine you have a repeating section like this: <div class="encumbrance">     <div class="encumbrance-row">         <h5>Item</h5>         <h5>Weight</h5>         <h5>Number</h5>     </div>     <fieldset class="repeating_encumbrance">         <div class="encumbrance-row">             <input type="text" name="attr_item_name" value="0">             <input type="number" name="attr_item_weight" value="0" step="0.01">             <input type="number" name="attr_item_quantity" value="1" step="1">         </div>        </fieldset> </div> You can then use the following CSS to lay it out like a table: div.sheet- encumbrance-row {     display: grid;     grid-template-columns: 150px 50px 50px;     column-gap: 5px; } div.sheet- encumbrance-row input[type="text"] {     width: 150px; } div.sheet- encumbrance-row input[type="number"] {     width: 50px; } Anything placed in a div with the class = " encumbrance-row" will then be organised into three columns, of with 150 px then 50 px then 50px. You can nest grids within each other, so the whole encumbrance section is placed in a div (class="encumbrance") so you can use grid to align that within the character sheet layout. Do some reading on grid - it will make your layout much, much easier once you get past the learning hump.
That's super helpful thank you GiGs. I shall have a look and see what I can find about grid stuff in CSS.
1605113533
Andreas J.
Forum Champion
Sheet Author
Translator
This page gives a short rundown on the main methods of doing layouts: <a href="https://wiki.roll20.net/Designing_Character_Sheet_Layout" rel="nofollow">https://wiki.roll20.net/Designing_Character_Sheet_Layout</a> Its a good idea to look at existing sheets, or the example sheets mentioned in the wiki documentation.