[BUG/HELP] is removed from table when rendered.

Hello Roll20 I recently styled a table and used a <colgroup> to fix some issues, but it appears after uploading the character sheet to Roll20, it was removed. Has this happened to anyone else? I believe my HTML is valid. Here is a snippet: <table class ="sheet-default-header-first-column sheet-default-header-odd-row" style =' width : 100 %; ' > <colgroup> <col style =" width : 1 px ; " > <col span ="7" > <col style =" width : 1 px ; " > </colgroup> <tr> <td></td> <td> Ability <br> Score </td> <td> Hit <br> Probability </td> <td> Damage <br> Adjustment </td> <td> Weight <br> Allowance </td> <td> Maximum <br> Press </td> <td> Open <br> Door </td> <td> Bend Bars <br> Lift Gate </td> <td> Notes </td> </tr> <tr> <td><button type ="roll" name ="roll_Strength-check" title ="%{Strength-check}" value ="/em attempts a feat of Strength! [[1d20cs<1cf>20-(?{Modifier?|0})]] ≤ [[@{Strength}]]" > Strength </button></td> <td><input type ="text" name ="attr_Strength" title ="@{Strength}" class ="short" value ="10[00]" /></td> <td><input type ="text" name ="attr_strengthhit" title ="@{strengthhit}" class ="sheet-short" value ="0" /></td> <td><input type ="text" name ="attr_strengthdmg" title ="@{strengthdmg}" class ="sheet-short" value ="0" /></td> <td><input type ="text" name ="attr_carryweight" title ="@{carryweight}" class ="sheet-short" value ="0" /></td> <td><input type ="text" name ="attr_maxpress" title ="@{maxpress}" class ="sheet-short" value ="0" /></td> <td><input type ="text" name ="attr_opendoor" title ="@{opendoor}" class ="sheet-short" value ="0[0]" ><button type ="roll" name ="roll_opendoor-check" title ="%{opendoor-check}" value ="/em attempts to force the door! [[1d20cs<1cf>20+(?{Modifier?|0})]] ≤ [[(@{opendoor})]]" ></button></td> <td><input type ="text" name ="attr_bendbar" title ="@{bendbar}" class ="sheet-short" value ="0" ><button type ="roll" name ="roll_bendbar-check" title ="%{bendbar-check}" value ="/em attempts a feat of incredible strength! [[1d100cs<1cf>100+(?{Mofifier?|0})]] ≤ [[(@{bendbar})]]" ></button></td> <td><input type ="text" name ="attr_strnotes" title ="@{strnotes}" ></td> </tr> ... </table> When I go to Chrome DevTools and and look up what's actually on the page, it looks like this: <table class="sheet-default-header-first-column sheet-default-header-odd-row" style="width: 100%"> <tbody> <tr> <td></td> <td>Ability<br>Score</td> <td>Hit<br>Probability</td> <td>Damage<br>Adjustment</td> <td>Weight<br>Allowance</td> <td>Maximum<br>Press</td> <td>Open<br>Door</td> <td>Bend Bars<br>Lift Gate</td> <td>Notes</td> </tr> <tr> <td><button type="roll" name="roll_Strength-check" title="%{Strength-check}" value="/em attempts a feat of Strength! [[1d20cs<1cf>20-(?{Modifier?|0})]]≤[[@{Strength}]]" class="btn ui-draggable">Strength</button></td> <td><input type="text" name="attr_Strength" title="@{Strength}" class="sheet-short" value="10[00]"></td> <td><input type="text" name="attr_strengthhit" title="@{strengthhit}" class="sheet-short" value="0"></td> <td><input type="text" name="attr_strengthdmg" title="@{strengthdmg}" class="sheet-short" value="0"></td> <td><input type="text" name="attr_carryweight" title="@{carryweight}" class="sheet-short" value="0"></td> <td><input type="text" name="attr_maxpress" title="@{maxpress}" class="sheet-short" value="0"></td> <td><input type="text" name="attr_opendoor" title="@{opendoor}" class="sheet-short" value="0[0]"><button type="roll" name="roll_opendoor-check" title="%{opendoor-check}" value="/em attempts to force the door! [[1d20cs<1cf>20+(?{Modifier?|0})]]≤[[(@{opendoor})]]" class="btn ui-draggable"></button></td> <td><input type="text" name="attr_bendbar" title="@{bendbar}" class="sheet-short" value="0"><button type="roll" name="roll_bendbar-check" title="%{bendbar-check}" value="/em attempts a feat of incredible strength! [[1d100cs<1cf>100+(?{Mofifier?|0})]]≤[[(@{bendbar})]]" class="btn ui-draggable"></button></td> <td><input type="text" name="attr_strnotes" title="@{strnotes}"></td> </tr> ... </tbody> </table> So Chrome has added a <tbody> tag to the HTML, but it has also removed the <colgroup>. Any help is appreciated

You're probably going to find that roll20 has some "nuances" in it's implementation of html/css/javascript.  While some are documented in the wiki, other's are learned through trial and error.  I'm guessing that colgroup is one such animal.  While you can still use tables for layout on your sheet's, it seems to be "discouraged" on roll20 (roll20 wiki: Best Practices ) in favor of div and span and css grid and/or flexbox .  You might try converting your table into a css grid. Using css grid for general layout and nesting grids and/or flex can be extremely versatile. 

Vince said: You're probably going to find that roll20 has some "nuances" in it's implementation of html/css/javascript.  While some are documented in the wiki, other's are learned through trial and error.  I'm guessing that colgroup is one such animal.  While you can still use tables for layout on your sheet's, it seems to be "discouraged" on roll20 (roll20 wiki: Best Practices ) in favor of div and span and css grid and/or flexbox .  You might try converting your table into a css grid. Using css grid for general layout and nesting grids and/or flex can be extremely versatile.  Thank you for the tip. I haven't actually looked into the best practices which I definitely should! About not using tables, that is going to be harder to do, as I am updating an existing sheet, and EVERYTHING is made with tables. Thus in order to no having to redo the entire sheet with new HTML and styling I would prefer to just style this table to look as I want it to.

After a bit more testing I found a workaround. Setting the <td> element to have a width of 1px; adds my desired styling. I will go with this for now. Thank you for your feedback. For reference the code now looks like this: <table class="sheet-default-header-first-column sheet-default-header-odd-row" style="width: 100%"> <tr> <td style="width: 1px;"></td> <td>Ability<br>Score</td> <td>Hit<br>Probability</td> <td>Damage<br>Adjustment</td> <td>Weight<br>Allowance</td> <td>Maximum<br>Press</td> <td>Open<br>Door</td> <td>Bend Bars<br>Lift Gate</td> <td style="width: 1px;">Notes</td> </tr> <tr> <td><button type="roll" name="roll_Strength-check" title="%{Strength-check}" value="/em attempts a feat of Strength! [[1d20cs<1cf>20-(?{Modifier?|0})]]≤[[@{Strength}]]" class="btn ui-draggable">Strength</button></td> <td><input type="text" name="attr_Strength" title="@{Strength}" class="sheet-short" value="10[00]"></td> <td><input type="text" name="attr_strengthhit" title="@{strengthhit}" class="sheet-short" value="0"></td> <td><input type="text" name="attr_strengthdmg" title="@{strengthdmg}" class="sheet-short" value="0"></td> <td><input type="text" name="attr_carryweight" title="@{carryweight}" class="sheet-short" value="0"></td> <td><input type="text" name="attr_maxpress" title="@{maxpress}" class="sheet-short" value="0"></td> <td><input type="text" name="attr_opendoor" title="@{opendoor}" class="sheet-short" value="0[0]"><button type="roll" name="roll_opendoor-check" title="%{opendoor-check}" value="/em attempts to force the door! [[1d20cs<1cf>20+(?{Modifier?|0})]]≤[[(@{opendoor})]]" class="btn ui-draggable"></button></td> <td><input type="text" name="attr_bendbar" title="@{bendbar}" class="sheet-short" value="0"><button type="roll" name="roll_bendbar-check" title="%{bendbar-check}" value="/em attempts a feat of incredible strength! [[1d100cs<1cf>100+(?{Mofifier?|0})]]≤[[(@{bendbar})]]" class="btn ui-draggable"></button></td> <td><input type="text" name="attr_strnotes" title="@{strnotes}"></td> </tr> ... </table>