List Items of repeating fields

Hello everyone. :) I would like to list the "spellNames" from my repeating list into a small table or "overview". That you don't always have to search, so that it becomes clear at a glance which spells have already been learned. Can anyone help me with this? Here is the code from the sheet: <div class="learnedspells"> <label style="text-align: center; display: block;">Spells</label> <fieldset class='repeating_spells'> <table style="border-collapse: collapse; border-spacing: 2px; border: 1px dotted black"> <tr> <td>Name:</td> <td><input type='text' name='attr_spellName'/></td> <td>Learned:</td> <td><input type='text' name='attr_spellLearndate'/></td> </tr> <tr> <td>Free:</td> <td><input type='text' name='attr_spellShortCode'/></td> <td>Movement:</td> <td><input type='text' name='attr_spellMovement'/></td> </tr> <tr> <td>Type:</td> <td colspan="3"> <select name='attr_spellResponsibility' style="width:100%;"> <option value='whitehat' selected="selected">white</option> <option value='grayhat'>gray</option> <option value='blackhat'>black</option> <option value='nosorry'>unforgivable</option> </select> </td> </tr> <tr> <td colspan="4"><textarea name="attr_spelldescription"style='width: 98%;height: 20px;'></textarea></td> </tr> </table> </fieldset> </div>

I would reorganise your spell data, removing the table and replacing with CSS Grid, and having one row per spell. Do you have a width limit? You current spell table has 4 columns. I'll post some code for this tomorrow, unless there's a reason you don't want to do it.

yeah, help is appreciated :D :)

There was a bit of a delay here. Hope that dooesn't matter. Okay, the way I did this is pretty straightforward but I'll need to explain it becayse it comprises several parts. You need both HTML and CSS. First, the HTML - replace all the HTML you have above, with this: < div class= "learnedspells" >     < h3 > Spells </ h3 >     < div class= "spells" >         < h4 > Name </ h4 >         < h4 > Learned </ h4 >         < h4 > Free </ h4 >         < h4 > Move </ h4 >         < h4 > Show </ h4 >       </ div >     < fieldset class= 'repeating_spells' >         < div class= "spells border" >             < input type= 'text' name= 'attr_spellName' />             < input type= 'text' name= 'attr_spellLearndate' />             < input type= 'text' name= 'attr_spellShortCode' />             < input type= 'text' name= 'attr_spellMovement' />             < input type= 'checkbox' name= 'attr_spellShow' />             < div class= "spell-details spell-col-5" >                 < span > Type: </ span >                 < select name= 'attr_spellResponsibility' class= "col-4" >                     < option value= 'whitehat' selected= "selected" > white </ option >                     < option value= 'grayhat' > gray </ option >                     < option value= 'blackhat' > black </ option >                     < option value= 'nosorry' > unforgivable </ option >                 </ select >                 < span > Description: </ span >                 < textarea name= "attr_spelldescription" class= "col-4" style= 'width: 98%;height: 20px;' ></ textarea >             </ div >         </ div >     </ fieldset > </ div > There are several things to note here. The heading label is changed to H3 - that is better for headings, and you don't need any inline styles Where possible, inline styles have been replaced with classes-  you'll see them in the CSS section All of the table, tr, td stuff has been removed - we don't need them The labels have been moved out to headings. The description textarea has a label (here a span). On to the CSS, this looks more complex when taken as a whole, but there are several bits that come together that should be explained separately. I'll do that below. Trust me, this looks waymore complex than it is. The entire CSS: div.learnedspells div.spells {     display : grid ;     grid-template-columns : repeat ( 4 , 1fr ) 30px ;     column-gap : 2px ; } div.learnedspells div.spells div.spell-details {     display : contents ; } div.learnedspells div.spells input [ type = "checkbox" ] :not ( :checked ) ~ div.spell-details {     display : none ; } div .col-4 {     grid-column : span 4 ; } .charsheet .border {     border-collapse : collapse ;     border-spacing : 2px ;     border : 1pt dotted black ; } .charsheet .border input , .charsheet .border select , .charsheet .border textarea {     border : none ;     background-color : gray ;     color : white ; } Breaking this down: This tiny section replaces the entire table. div.learnedspells div.spells {     display:grid;     grid-template-columns: repeat(4, 1fr) 30px;     column-gap: 2px; } This assigns a 400px wide grid to that area. You can remove the width line entirely and it'll automatically fill whatever space is available. column-gap sets how much psace there is between oclumns. I typically use 5px, you can make this whatever you want. grid-template column creates the columns and sets the width of each column. I have repeat(4) which says "do this 4 times", with a wudth of 1fr. 1 fr means 1 equal fraction. It's a good unit to use when you don't know how big an area is so you can use it to fill the available space. So this sees the final column is a fixed 30px, there are 5 columns so 4 column gaps of 2px each, so that totals 38px. It takes the whole width, subtracts 38px, then divides it by 4 nd assigns them each to the 1fr entries. The output looks something like this: It's using the colors it is purely because of some of my extra CSS. With this part I make the checkbox work: div.learnedspells div.spells input[type="checkbox"]:not(:checked) ~ div.spell-details {     display: none; } What it does is look to see if a checkbox is checked. If it iis it reveals the section below, and if not it hides it. This part makes sure the description and type each take up 4 columns of the grid: div .col-4 {     grid-column: span 4; } Finally, because you have a border, I gave each input, select, and textarea a background colour. You could change (and probably should!) or remove those - changing them here will change them for all items in the section (that's the beauty of CSS classes) .charsheet .border {     border-collapse : collapse ;     border-spacing : 2px ;     border : 1pt dotted black ; } .charsheet .border input , .charsheet .border select , .charsheet .border textarea {     border : none ;     background-color : gray ;     color : white ; } Now with the checkboxes unchecked, someone can see all of their spells in a column, just looking down the Name column. If you have any questions, ask away.

You also might want to create a CSS rule to modify the Type and description headings. You could do that with div.learnedspells span { /* styles go here */ }

Thank you! No problem. :D I replaced the snippets in my HTML and CSS with the code you provided. But now I'm confused... The output looks a little bit different and takes more than 800px (the max-width of my sheet).. Any ideas? :)

If it has to sit within a specific width, you can try this: div.learnedspells { width: 800px; } let us know if it worked. If you need it narrower, just change that  width. If there are any other specific changes to appearance you need, let us know what they are.

Even the change to 400px just changes the Titles. The input-fields remainin their actual state. I've checked the CSS for input-field changes, but I couldn't find something. Other ideas? :3

You probably need to set widths for the inputs. This should work: .charsheet div input {   width: auto; } You might need to set the width to 100%, or a specific value, but the above works for me.

thanks. that worked! :)