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 rows that stay aligned together or are within the same flex element?

1614114904
Daniel S.
Pro
Sheet Author
I'm wondering how to prevent this from happening: <a href="https://www.dropbox.com/s/fqgkabojq14s2iv/Screen%20Shot%202021-02-23%20at%203.06.21%20PM.png?dl=0" rel="nofollow">https://www.dropbox.com/s/fqgkabojq14s2iv/Screen%20Shot%202021-02-23%20at%203.06.21%20PM.png?dl=0</a> I tried nesting the repeating row inside the table but that didn't seem to work. I like how the 'armor table' (in the specific example) get moved around when I resize, and it seems from 'inspect'ing the code that the &lt;tables&gt; I have (which I'm only using for tabular date and not for layout) are moved around via flex something in roll20's background code.&nbsp; Is there a simple way to nest these repeating rows with the &lt;table&gt; above it so that they get moved and resized together when flex moves stuff around? I think I could maybe do it with grid but I think that isolates the table into one locked location? Apologies if this is a very simple answer. Thanks for any help. Here's some of the code: &lt;!-- ARMOR TABLE --&gt; &lt;div&gt; &lt;div class="WordSection1"&gt; &lt;table class="MsoNormalTable" border="1" width="450" cellspacing="0" cellpadding="0"&gt; &lt;tr style="height: 12.8pt;"&gt; &lt;td style="width: 100pt; border: solid #BFBFBF 1.0pt; background: black; padding: 0in 1.5pt 0in 1.5pt; height: 12.8pt;" width="90"&gt; &lt;p class="Standard" style="margin-left: -3.7pt; text-align: center; text-indent: -2.65pt;" align="center"&gt; &lt;span style="color: #ffffff; font-size: 8pt;"&gt; &lt;strong&gt; Armor&lt;/strong&gt; &lt;/span&gt; &lt;/p&gt; &lt;/td&gt; &lt;td style="width: 137pt; border: solid #BFBFBF 1.0pt; border-left: none; background: #D9D9D9; padding: 0in 1.5pt 0in 1.5pt; height: 12.8pt;" width="99"&gt; &lt;p class="Standard" style="text-align: center;" align="center"&gt; &lt;strong&gt; &lt;span style="font-size: 8.0pt;"&gt;Location&lt;/span&gt; &lt;/strong&gt; &lt;/p&gt; &lt;/td&gt; &lt;td style="width: 22.7pt; border: solid #BFBFBF 1.0pt; border-left: none; background: black; padding: 0in .5pt 0in .5pt; height: 12.8pt;"&gt; &lt;p class="Standard" style="text-align: center;" align="center"&gt; &lt;span style="color: #ffffff; font-size: 8pt;"&gt; &lt;strong&gt;DR&lt;/strong&gt; &lt;/span&gt; &lt;/p&gt; &lt;/td&gt; &lt;td style="width: 20pt; border: solid #BFBFBF 1.0pt; border-left: none; background: #D9D9D9; padding: 0in 1.5pt 0in 1.5pt; height: 12.8pt;" width="31"&gt; &lt;p class="Standard" style="text-align: center;" align="center"&gt; &lt;strong&gt; &lt;span style="font-size: 8.0pt;"&gt;AV&lt;/span&gt; &lt;/strong&gt; &lt;/p&gt; &lt;/td&gt; &lt;td style="width: 20.7pt; border: solid #BFBFBF 1.0pt; border-left: none; background: black; padding: 0in 1.5pt 0in 1.5pt; height: 12.8pt;" width="41"&gt; &lt;p class="Standard" style="text-align: center;" align="center"&gt; &lt;span style="font-size: 8pt; color: #ffffff;"&gt;BD&lt;/span&gt; &lt;/p&gt; &lt;/td&gt; &lt;td style="width: 22.5pt; border: solid #BFBFBF 1.0pt; border-left: none; background: #F2F2F2; padding: 0in 1.5pt 0in 1.5pt; height: 12.8pt;" width="45"&gt; &lt;p class="Standard" style="text-align: center;" align="center"&gt; &lt;span style="font-size: 7.0pt;"&gt;APM&lt;/span&gt; &lt;/p&gt; &lt;/td&gt; &lt;td style="width: .25in; border: solid #BFBFBF 1.0pt; border-left: none; background: #F2F2F2; padding: 0in 1.5pt 0in 1.5pt; text-fit: 100%; height: 12.8pt;"&gt; &lt;p class="Standard" style="text-align: center;" align="center"&gt; &lt;em&gt; &lt;span style="font-size: 7.0pt;"&gt;Stealth&lt;/span&gt; &lt;/em&gt; &lt;/p&gt; &lt;/td&gt; &lt;td style="width: .5in; border: solid #BFBFBF 1.0pt; border-left: none; background: #F2F2F2; padding: 0in .5pt 0in .5pt; height: 12.8pt;" width="72"&gt; &lt;p class="Standard" style="text-align: center;" align="center"&gt; &lt;em&gt; &lt;span style="font-size: 8.0pt;"&gt;Other&lt;/span&gt; &lt;/em&gt; &lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;fieldset class="repeating_armor"&gt; &lt;table class="MsoNormalTable" border="1" width="450" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td style="width: 65pt; border-top: none; border-left: solid #BFBFBF 1.0pt; border-bottom: solid windowtext 1.0pt; border-right: solid #BFBFBF 1.0pt; background: #F2F2F2; padding: 0in 1.5pt 0in 1.5pt; height: 12.8pt;" width="90"&gt; &lt;input type=text name="attr_armor" style=""&gt;&lt;/td&gt; &lt;td style="width: 90pt; border-top: none; border-left: none; border-bottom: solid #BFBFBF 1.0pt; border-right: solid #BFBFBF 1.0pt; background: white; padding: 0in 1.5pt 0in 1.5pt; height: 12.8pt;" width="99"&gt; &lt;input type=text name="attr_location" style=""&gt;&lt;/td&gt; &lt;td style="width: 16pt; border-top: none; border-left: none; border-bottom: solid #BFBFBF 1.0pt; border-right: solid #BFBFBF 1.0pt; background: white; padding: 0in .5pt 0in .5pt; height: 12.8pt;"&gt; &lt;input type=text name="attr_damagereduction" style=" font-weight: bold;"&gt;&lt;/td&gt; &lt;td style="width: 16pt; border-top: none; border-left: none; border-bottom: solid #BFBFBF 1.0pt; border-right: solid #BFBFBF 1.0pt; background: white; padding: 0in 1.5pt 0in 1.5pt; height: 12.8pt;" width="31"&gt; &lt;input type=text name="attr_armorvalue" style=""&gt;&lt;/td&gt; &lt;td style="width: 15pt; border-top: none; border-left: none; border-bottom: solid #BFBFBF 1.0pt; border-right: solid #BFBFBF 1.0pt; background: white; padding: 0in 1.5pt 0in 1.5pt; height: 12.8pt;" width="41"&gt; &lt;input type=text name="attr_armortablebody" style=""&gt;&lt;/td&gt; &lt;td style="width: 17pt; border-top: none; border-left: none; border-bottom: solid #BFBFBF 1.0pt; border-right: solid #BFBFBF 1.0pt; background: white; padding: 0in .5pt 0in .5pt; height: 12.8pt;" width="45"&gt; &lt;input type=text name="attr_actionpointmodifier" style=""&gt;&lt;/td&gt; &lt;td style="width: 21pt; border-top: none; border-left: none; border-bottom: solid #BFBFBF 1.0pt; border-right: solid #BFBFBF 1.0pt; background: white; padding: 0in 1.5pt 0in 1.5pt; height: 12.8pt;"&gt; &lt;input type=text name="attr_stealtharmormodifier" style=""&gt;&lt;/td&gt; &lt;td style="width: 26pt; border-top: none; border-left: none; border-bottom: solid #BFBFBF 1.0pt; border-right: solid #BFBFBF 1.0pt; background: white; padding: 0in .5pt 0in .5pt; height: 12.8pt;" width="72"&gt; &lt;input type=text name="attr_other" style=""&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/fieldset&gt; &lt;p&gt;&lt;/p&gt; &lt;/div&gt;
1614115791

Edited 1614116162
Andreas J.
Forum Champion
Sheet Author
Translator
&lt;table&gt; layout is hard, and somewhat discouraged. You thing is likely fixable in some way, but I would Using frameworks like flexbox or CSS Grid is the modern approach to shape and align things flexibly. I think you might also want to look at specifics of how repeating sections are styled, they are a bit tricker than other <a href="https://wiki.roll20.net/Designing_Character_Sheet_Layout" rel="nofollow">https://wiki.roll20.net/Designing_Character_Sheet_Layout</a> <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections</a> Based on the title, I was actually assuming this had something to do with flexbox, as I've never associated &lt;table&gt; with the work "flex". Besides, CSS is meant to be sued for styling things, and it's easier to manage there than squeezing in style="" in all those elements.
1614115986

Edited 1614116041
Daniel S.
Pro
Sheet Author
Well it seems like the individual table elements are being aligned via flex, just not via my code, but rather via roll20's base background code for handling character sheets.&nbsp; Since I can't seem to align things via &lt;table&gt; do I just need to change the entire &lt;table&gt; to a flexbox "table"? And can I have a repeating section nested inside a faux table that uses flexbox? And yeah, definitely need to clean up some of the style="" stuff.
1614116434
Andreas J.
Forum Champion
Sheet Author
Translator
Daniel S. said: Since I can't seem to align things via &lt;table&gt; do I just need to change the entire &lt;table&gt; to a flexbox "table"? And can I have a repeating section nested inside a faux table that uses flexbox? That's what I would go for, but it's possible something is doable your way, I just don't have much additional useful advice I can give on a fly-by. I edited the commenet just as you replied, so might also wanna check out <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections</a> to see if better control form those things can help you out with aligning things.
1614119836
GiGs
Pro
Sheet Author
API Scripter
I would do this with CSS Grid. It's perfect for repeating sections that are meant to look like tables. Replace your html with this &lt;!--&nbsp;ARMOR&nbsp;TABLE&nbsp;--&gt; &lt; div &nbsp; class = "armor" &gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt; div &nbsp; class = "armor-grid" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; span &nbsp; class = "title" &gt; Armor &lt;/ span &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; span &gt; Location &lt;/ span &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; span &nbsp; class = "title" &gt; DR &lt;/ span &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; span &nbsp; class = "title" &gt; AV &lt;/ span &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; span &nbsp; class = "title" &gt; BD &lt;/ span &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; span &nbsp; class = "title-small" &gt; APM &lt;/ span &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; span &nbsp; class = "title-small" &gt; Stealth &lt;/ span &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; span &gt; Other &lt;/ span &gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;/ div &gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt; fieldset &nbsp; class = "repeating_armor" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; div &nbsp; class = "armour-grid" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "text" &nbsp; name = "attr_armor" &nbsp; value = "" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "text" &nbsp; name = "attr_location" &nbsp; value = "" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; class = "bold" &nbsp; type = "text" &nbsp; name = "attr_damagereduction" &nbsp; value = "" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "text" &nbsp; name = "attr_armorvalue" &nbsp; value = "" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "text" &nbsp; name = "attr_armortablebody" &nbsp; value = "" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "text" &nbsp; name = "attr_actionpointmodifier" &nbsp; value = "" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "text" &nbsp; name = "attr_stealtharmormodifier" &nbsp; value = "" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; input &nbsp; type = "text" &nbsp; name = "attr_other" &nbsp; value = "" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ div &gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;/ fieldset &gt; &lt;/ div &gt; And add this to the CSS file div.sheet-armor &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; border :&nbsp; 1pt &nbsp; solid &nbsp; black ; &nbsp;&nbsp;&nbsp;&nbsp; width :&nbsp; 450pt ; &nbsp;&nbsp;&nbsp;&nbsp; padding :&nbsp; 0 ; &nbsp;&nbsp;&nbsp;&nbsp; } div.sheet-armor-grid &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; display :&nbsp; grid ; &nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns :&nbsp; 100pt &nbsp; 137pt &nbsp; 22.7pt &nbsp; 20pt &nbsp; 20.7pt &nbsp; 22.5pt &nbsp; .35in &nbsp; .5in ; &nbsp;&nbsp;&nbsp;&nbsp; column-gap :&nbsp; 0 ; &nbsp;&nbsp;&nbsp;&nbsp; } div.sheet-armour-grid &nbsp; span , div.sheet-armour-grid &nbsp; input [ type = "text" ]&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; border :&nbsp; solid &nbsp; #BFBFBF &nbsp; 1.0pt ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; background :&nbsp; #D9D9D9 ; &nbsp;&nbsp;&nbsp;&nbsp; padding :&nbsp; 0in &nbsp; 1.5pt &nbsp; 0in &nbsp; 1.5pt ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; height :&nbsp; 12.8pt ; &nbsp;&nbsp;&nbsp;&nbsp; text-align :&nbsp; center ; &nbsp;&nbsp;&nbsp;&nbsp; font-size :&nbsp; 8.0pt ; &nbsp;&nbsp;&nbsp;&nbsp; width :&nbsp; 100% ; &nbsp;&nbsp;&nbsp;&nbsp; text-align :&nbsp; center ; } input [ type = "text" ] .sheet-bold &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; font-weight :&nbsp; bold ; } div.sheet-armour-grid &nbsp; span.sheet-title &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; font-weight :&nbsp; bold ; &nbsp;&nbsp;&nbsp;&nbsp; background :&nbsp; black ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; color :&nbsp; #ffffff ; } div.sheet-armour-grid &nbsp; span.sheet-title-small &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; font-size :&nbsp; 7.0pt ; } Note this line: grid-template-columns:&nbsp;100pt&nbsp;137pt&nbsp;22.7pt&nbsp;20pt&nbsp;20.7pt&nbsp;22.5pt&nbsp;.35in&nbsp;.5in; This lets you set the width of each column, and elements inside the grid will automatically be set to those widths. Feel free to fiddle with them to change the layout. I wasnt sure exactly the values to use, as you seem to have applied different values to your title row and the rows inside the fieldset. For the rest, CSS is far superior for layout and styling, then using inline style commands. They allow you to set all the formatting in one place, instead of over and over.&nbsp; In the above I have&nbsp; div.sheet-armour-grid&nbsp;span, This means apply the stypes to all spans that are inside divs with a class armour-grid. I also have: div.sheet-armour-grid&nbsp;span.sheet-title div.sheet-armour-grid&nbsp;span.sheet-title-small These say apply the listed styles to spans with a class title, and a class title-small.&nbsp; Note that CSS applies all styles that apply. So a span with the class="title" &nbsp;is also a span, so everything in both of these applies: div.sheet-armour-grid&nbsp;span div.sheet-armour-grid&nbsp;span.sheet-title But where they have conflicting styles, the more specific class applies. So its a great way of limiting the amount of styling commands you have to write. You know that span.sheet-title has all the styles that span has,&nbsp; except span.sheet-title overrides span if they have the same element (like background-color).
1614124861
Daniel S.
Pro
Sheet Author
Huh. This is super helpful, I'll give this a try. Thank you!
1614125806

Edited 1614125836
Daniel S.
Pro
Sheet Author
Well I got this crazy thing with a simple copy paste. But I'll see if I can't dissect what you shared and figure something out. This definitely gives me a good direction to head in. Probably just have to troubleshoot/debug any other CSS things I have going on, or other conflicts. <a href="https://www.dropbox.com/s/4hexo5vdoczptmi/Screen%20Shot%202021-02-23%20at%206.14.50%20PM.png?dl=0" rel="nofollow">https://www.dropbox.com/s/4hexo5vdoczptmi/Screen%20Shot%202021-02-23%20at%206.14.50%20PM.png?dl=0</a>
1614127112

Edited 1614127199
GiGs
Pro
Sheet Author
API Scripter
That looks like there's something wrong with the CSS, or the HTML inside the fieldset. The grid isnt being applied to to the fieldset internals. Can you post the html for your fieldset? Also the way your top div overlaps the top of the armour section obviously is broken. Can you post your complete html and css to pastebin.com and link it here?
1614129298
Daniel S.
Pro
Sheet Author
I just uploaded the most recent html and css, from before copy pasting yours in.&nbsp; <a href="https://github.com/danimagaming/ForgeofSteelRoll20beta" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta</a>
1614130234

Edited 1614130475
GiGs
Pro
Sheet Author
API Scripter
Here's what I get if I copy in the code I gave above and delete the old armour table It's not perfect - the final column isnt perfectly aligned, and I'm not sure why, offhand, the add/modify buttons dont fill the width* , but those are minor issues. If you post the actual code you are using we'll be able to see why yours isnt working. One thing: you've used table layout very widely through the sheet. If you have any intentions of posting this to roll20's github repository, you'll have to replace all &nbsp;of those tables with another approach (grid is generally easiest). Roll20 will not accept any sheet that uses tables for layout. *it's the width in the div.sheet-armor css. It needs to be made wider to encompass the full armour grid.
1614192157

Edited 1614192941
Daniel S.
Pro
Sheet Author
I'll see what I can do. I thought tables were okay for tabular data? I'm only using tables for that, as far as I'm aware? I didn't think I had anything in fixed positions for the layout using the tables. I even posted another post awhile ago to clarify and it seemed like it was fine if the tables are just for tabular data. What exactly does it mean to use a table for 'layout', vs. for tabular data? What am I missing?
1614198810

Edited 1614199163
GiGs
Pro
Sheet Author
API Scripter
Tabula data has a very specific meaning for html. If your table contains any html items, like &lt;p&gt; or &lt;div&gt; or &lt;button&gt;, or even &lt;inputs, its probably a layout table, not a tabular data table. If your table just &nbsp;contains text or numbers, it is probably tabular data. Think of a spreadsheet - if you are displaying a set of account values, with just headings and values, its tabular data.&nbsp; Roll20 takes accessibility very seriously, and tables containing other html elements make it hard for screen readers and other accessibility tools to to interpret them. Your sheet is using tables to organise and position buttons, among other things, and that is the definition of using tables for layout, not tabular data. On the plus side, once you get familiar with CSS Grid, its actually much easier to create table layouts than it is to use a table-&nbsp; look at how little html my code above uses, and it only has so much CSS because of the styl;istic choices your sheet has - the actual layout part is tiny, basically just this bit: div.sheet-armor-grid &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; display :&nbsp; grid ; &nbsp;&nbsp;&nbsp;&nbsp; grid-template-columns :&nbsp; 100pt &nbsp; 137pt &nbsp; 22.7pt &nbsp; 20pt &nbsp; 20.7pt &nbsp; 22.5pt &nbsp; .35in &nbsp; .5in ; &nbsp;&nbsp;&nbsp;&nbsp; column-gap :&nbsp; 0 ; }
1614208537

Edited 1614208552
Daniel S.
Pro
Sheet Author
Okay. This helps clarify. Thanks again. Everything I've found online indicates that because the primary use is to display data, even with text inputs and such, then it's a table being used for tabular data. I've been trying to find where the line is with Roll20 and it's been very difficult to say the least. As long as I know what the proper requirements are I can move forward and figure out what I need to do.
1614256971
Andreas J.
Forum Champion
Sheet Author
Translator
GiGs said: Tabula data has a very specific meaning for html. If your table contains any html items, like &lt;p&gt; or &lt;div&gt; or &lt;button&gt;, or even &lt;inputs, its probably a layout table, not a tabular data table. If your table just &nbsp;contains text or numbers, it is probably tabular data. Think of a spreadsheet - if you are displaying a set of account values, with just headings and values, its tabular data. Thanks, this clarifies "tabular data" to me somewhat, prior to this I didn't think of the term much or what it actually meant. Gonna remember this for later when I next time tell people to not use &lt;table&gt;.