Table rows ignoring width on custom sheet

So I have been tinkering with the Star Wars d20 revised sheet. The original author made a table that has repeating items to add feats. I am trying to add an input box that hides a text area in each repeating item so that the players can add the description of the feat below. However when I do this the rows ignore the styling on the sheet here is the original HTML <td valign="top"> <table cellpadding="10" cellspacing="0"> <tr> <td colspan="3" class="sheet-statlabel-big-gray" style="font-size: 1.5em; width: 230px;">Feats</td> </tr> </table> <fieldset class="repeating_feats"> <table cellpadding="0" cellspacing="0"> <tr> <td class="sheet-statlabel" style="font-size: .65em; width: 250px;">Feat Name</td> </tr> <tr> <td><input class="sheet-inputbox" type="text" name="attr_featname" style="height: 24px; width: 250px;"></td> </tr> </table> </fieldset> </td> And here is the CSS for the relevant classes .charsheet table td.sheet-statlabel-big-gray { background-color: gray; color: white; font-family:"Contrail One"; font-size: 1em; text-align: center; border-radius:8px 12px; } .charsheet table td.sheet-statlabel { background-color: black; color: white; font-family:"Contrail One"; font-size: 1em; text-align: center; border-radius:8px 12px; } .charsheet input.sheet-inputbox { background-color: transparent; text-align:center; border-style: solid; border-color: black; border-width: 1px 1px 1px 1px; margin:1px;  how ever when I add the HTML for a checkbox to hide/show a hidden text area like this <td valign="top" style="width:250px;"> <table cellpadding="10" cellspacing="0"> <tr> <td colspan="3" class="sheet-statlabel-big-gray" style="font-size: 1.5em; width: 230px;">Feats</td> </tr> </table> <fieldset class="repeating_feats"> <table cellpadding="0" cellspacing="0"> <tr> <td class="sheet-statlabel" style="font-size: .65em; width: 250px;">Feat Name</td> </tr> <tr> <td> <input class="sheet-inputbox" type="text" name="attr_featname" style="height: 24px; width: 250px;"/> <div class="sheet-featdesc"> <input type="checkbox" class="sheet-toggle-show" /> <div class="sheet-body"><textarea name="attr_featdesc" style="width: 250px;"></textarea></div> </div> </td> </tr> </table> </fieldset> </td> with the CSS to hide/show the text area input.sheet-toggle-show:not(:checked) ~ div.sheet-body, input.sheet-toggle-hide:checked ~ div.sheet-body { display: none; } the table ends up looking like this I have tried using table-layout:fixed;  , specifying the the table width to be 250px, but it just ignores that styling I cannot figure it out

HTML tables are notoriously hard to style and adjust with CSS, and is kinda the reason Roll20 forbids their use in any new sheets submitted. OTOH, remaking it with some other layout frameworks like css grid or flexbox won't be too easy for you either. Sorry I don't have any quick answers, there might be a solution that makes things work, but I won't invest energy in trying to troubleshoot table elements. Although, maybe using "max-width" instead of "width" might work?

I'll give it a shot. The original sheet had the entire thing laid out in tables. I am slowly going through it and switching to Flexbox... it's an arduous process but it's been a good learning experience

Well that didn't work. Curse you tables!

What does it look like when you check the checkbox to display the box? Where does the description box go?  I can already see where the CSS goes awry and I might need to get the full code base so I can play Operation on it. I suspect the problem is you haven't give the sheet enough space to fit everything so its just making its own room. You've got a defined 250px column containing a 230px text area with a checkbox of probably not 20px width. I can't examine the computed table for its CSS settings but from the screenshots but there's probably all sorts of padding and margins on top of this. 

OMG I never even considered the checkbox having padding or margins....  I'll try removing the margin and padding from the checkbox's class and see if that helps. I'm at work till 2:00 PM EST so I can't screen cap (for legal reasons) but I will later but the text area pops up underneath and and a little to the right of the inputbox. I appreciate the help so far, is there anything else that you need from me just let me know what I can do ( I am still learning the ropes of HTML and CSS)

Daxriel said: OMG I never even considered the checkbox having padding or margins....  I'll try removing the margin and padding from the checkbox's class and see if that helps. Roll20 adds some very 'generous' padding to some elements, which is often a pain. Several sheet designers put some css at the start of their file to clear some of the roll20 additions.

GiGs said: Roll20 adds some very 'generous' padding to some elements, which is often a pain. Several sheet designers put some css at the start of their file to clear some of the roll20 additions. Good to know. I tried removing the padding and changing the width for the input checkbox (which for some reason has a width of 400px. no wonder it's over flowing)... I haven't figured it out yet.

Some other things to try, I would probably play with knowing how big the checkbox is and using the following for the input: width: calc (100% - 50px); rather than a set pixel width for all your internal elements to save yourself a headache. The less specific you can be, the better. There's more preferable ways to do similar things (I'm a huge fan of flexbox myself) but it's a slightly less hacky way to use up your space with less specificity. 

I'll give that a shot too... I'm slowly trying to update the sheet to flexbox. this is a mess inherited from the original sheet author and I think it's because the sheet is pretty old... 

OMG!!! I think I figured out why setting the width and padding didn't work the first time.... I was styling the wrong class. .sheet-toggle-show{ width:20px; margin:0px; padding:0px; } now gets me  THANK YOU SO MUCH!! Like I said I hadn't thought about the idea that the checkbox occupying like 10px would have a 400px width  😂

lol, we've all been there. Congrats on getting it sorted.