Selectable Hidden Information

Wasn't really sure how to word the title. Anyway, I was wondering how does the Pathfinder character sheet hide certain number input values with a checkbox?  It'll be extremely helpful for a character sheet I'm trying to build.

You can toggle display:none in css based on the check box's state. example; html <input type="checkbox" name="attr_toggle-foo">Show/Hide <div>Foo</div> css .sheet-toggle-view:checked ~ .sheet-show-foo {display:none;} If you don't like seeing the check box input, you can hide the checkbox with opacity:0, give it position:absolute place text over the top to simulate clickable text by giving the input width to match the text.  Add a little color change on the text on hover and Bob's your uncle.     

Vince said: You can toggle display:none in css based on the check box's state. example; html <input type="checkbox" name="attr_toggle-foo">Show/Hide <div>Foo</div> css .sheet-toggle-view:checked ~ .sheet-show-foo {display:none;} If you don't like seeing the check box input, you can hide the checkbox with opacity:0, give it position:absolute place text over the top to simulate clickable text by giving the input width to match the text.  Add a little color change on the text on hover and Bob's your uncle.      That works!  So... if I want to hide multiple things with the same checkbox, I have to have them all under the same sheet class?

Black.k.9 said: That works!  So... if I want to hide multiple things with the same checkbox, I have to have them all under the same sheet class? For the most part, yes.  You may have to adjust your  css combinators to match your elements "hierarchy" (sibling, child, etc.)

Vince said: Black.k.9 said: That works!  So... if I want to hide multiple things with the same checkbox, I have to have them all under the same sheet class? For the most part, yes.  You may have to adjust your  css combinators to match your elements "hierarchy" (sibling, child, etc.) CSS heirarchy?  Sorry?  I'm extremely new to CSS.

I'm not that good with css either.&nbsp; ;-)&nbsp; "Hierarchy" was probably a poor choice of words since it probably has more to do with&nbsp; specificity .&nbsp; Basically, I meant that it's how the various elements are placed within your html.&nbsp; Parent, child, and sibling.&nbsp; You may have to change your css to match where you've place the input and the element you want to show/hide. Here's a great interactive tutorial to teach you all about using selectors and combinators in css to target specific elements.&nbsp; <a href="https://flukeout.github.io/" rel="nofollow">https://flukeout.github.io/</a>

Vince said: I'm not that good with css either.&nbsp; ;-)&nbsp; "Hierarchy" was probably a poor choice of words since it probably has more to do with&nbsp; specificity .&nbsp; Basically, I meant that it's how the various elements are placed within your html.&nbsp; Parent, child, and sibling.&nbsp; You may have to change your css to match where you've place the input and the element you want to show/hide. Here's a great interactive tutorial to teach you all about using selectors and combinators in css to target specific elements.&nbsp; <a href="https://flukeout.github.io/" rel="nofollow">https://flukeout.github.io/</a> Right. From what I can understand, you're telling me that if I want to have multiple different groups of hidden objects, I have to write a new section of CSS code for each group to be separate when hiding.&nbsp; Is this correct?&nbsp; I'm terrible with programming, even terms like Parent, child and sibling confuse me.

You won't necessarily have to create new selectors for every element you want to show/hide.&nbsp; It really depends on how your html is set up.&nbsp; You can also re-use the hidden input in various sections of the sheet, perhaps right before the element you want to hide.&nbsp; When one input is toggled, all the other hidden inputs of the same name will also toggle which will trigger your css to hide any general sibling (~) element with class="sheet-show-foo"&nbsp; &nbsp;The input and the element you are targeting must be within the same parent element. that's what this line does; .sheet-toggle-view:checked ~ .sheet-show-foo {display:none;}

Vince said: You won't necessarily have to create new selectors for every element you want to show/hide.&nbsp; It really depends on how your html is set up.&nbsp; You can also re-use the hidden input in various sections of the sheet, perhaps right before the element you want to hide.&nbsp; When one input is toggled, all the other hidden inputs of the same name will also toggle which will trigger your css to hide any general sibling (~) element with class="sheet-show-foo"&nbsp; &nbsp;The input and the element you are targeting must be within the same parent element. that's what this line does; .sheet-toggle-view:checked ~ .sheet-show-foo {display:none;} I... Guess?&nbsp; Ugh... this isn't really making sense to me.

No worries.&nbsp; I'm positive I'm not the best person to be teaching css. ;-(&nbsp; In order to make these kinds of adjustments to your sheet, some basic css terminology and skills are probably necessary.&nbsp; There are lot's of tutorials on the net for learning css.&nbsp;&nbsp; Can you post a little bit of your code with an explanation of what you would like to accomplish?

Vince said: No worries.&nbsp; I'm positive I'm not the best person to be teaching css. ;-(&nbsp; In order to make these kinds of adjustments to your sheet, some basic css terminology and skills are probably necessary.&nbsp; There are lot's of tutorials on the net for learning css.&nbsp;&nbsp; Can you post a little bit of your code with an explanation of what you would like to accomplish? Sure thing! &lt;h4&gt;Stats&lt;/h4&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table class="sheet-tableII"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th class="sheet-heading"&gt;Total&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th class="sheet-heading"&gt;Bonus&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th class="sheet-heading"&gt;Base&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th class="sheet-heading"&gt;Racial&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th class="sheet-heading"&gt;Growth%&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Str"&gt;Str&lt;/button&gt;&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Str-Ttl" value="@{Str-bonus}+@{Str-base}+@{Str-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Str-bonus" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Str-base" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Str-racial" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Str-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Mag"&gt;Mag&lt;/button&gt;&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Mag-Ttl" value="@{Mag-bonus}+@{Mag-base}+@{Mag-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Mag-bonus" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Mag-base" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Mag-racial" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Mag-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Skill"&gt;Skill&lt;/button&gt;&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Skill-Ttl" value="@{Skill-bonus}+@{Skill-base}+@{Skill-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Skill-bonus" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Skill-base" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Skill-racial" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Skill-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Spd"&gt;Spd&lt;/button&gt;&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Spd-Ttl" value="@{Spd-bonus}+@{Spd-base}+@{Spd-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Spd-bonus" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Spd-base" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Spd-racial" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Spd-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Lck"&gt;Lck&lt;/button&gt;&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Lck-Ttl" value="@{Lck-bonus}+@{Lck-base}+@{Lck-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Lck-bonus" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Lck-base" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Lck-racial" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Lck-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Def"&gt;Def&lt;/button&gt;&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Def-Ttl" value="@{Def-bonus}+@{Def-base}+@{Def-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Def-bonus" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Def-base" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Def-racial" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Def-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Res"&gt;Res&lt;/button&gt;&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Res-Ttl" value="@{Res-bonus}+@{Res-base}+@{Res-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Res-bonus" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Res-base" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Res-racial" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Res-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Con"&gt;Con&lt;/button&gt;&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Con-Ttl" value="@{Con-bonus}+@{Con-base}+@{Con-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Con-bonus" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Con-base" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;input type="number" name="Con-racial" value="0"&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td align="center"&gt;N/A&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &lt;/table&gt; Basically, everything under "Base," "Race," and "Growth" should be hidden unless directly adjusting for UI convenience and to reduce on-screen clutter for a character sheet.&nbsp; It's literally the only part that I want to hide.

Thanks k9. Try this;&nbsp; (I added sheet-compact to each table element that you want to hide/compact.&nbsp; The css line can be interpreted as;(reading from right to left) hide all elements that include the class sheet-compact that are child elements(inside) of a Table when a sibling(adjacent) input with class sheet-compact is checked.)&nbsp; Like I mentioned, the checkbox and text can be further styled if you only want to click text or an image, but this is a very basic working model for hide/show with a checkbox. css input.sheet-compact:checked ~ table .sheet-compact {display:none;} html &lt;h4&gt;Stats&lt;/h4&gt;&lt;input name="attr_compact" type="checkbox" value="1" class="sheet-compact" /&gt;&lt;span&gt;compact&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;table class="sheet-tableII"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th class="sheet-heading"&gt;Total&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th class="sheet-heading"&gt;Bonus&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th class="sheet-heading sheet-compact"&gt;Base&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th class="sheet-heading sheet-compact"&gt;Racial&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th class="sheet-heading sheet-compact"&gt;Growth%&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Str"&gt;Str&lt;/button&gt;&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Str-Ttl" value="@{Str-bonus}+@{Str-base}+@{Str-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Str-bonus" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Str-base" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Str-racial" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Str-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Mag"&gt;Mag&lt;/button&gt;&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Mag-Ttl" value="@{Mag-bonus}+@{Mag-base}+@{Mag-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Mag-bonus" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Mag-base" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Mag-racial" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Mag-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Skill"&gt;Skill&lt;/button&gt;&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Skill-Ttl" value="@{Skill-bonus}+@{Skill-base}+@{Skill-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Skill-bonus" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Skill-base" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Skill-racial" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Skill-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Spd"&gt;Spd&lt;/button&gt;&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Spd-Ttl" value="@{Spd-bonus}+@{Spd-base}+@{Spd-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Spd-bonus" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Spd-base" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Spd-racial" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Spd-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Lck"&gt;Lck&lt;/button&gt;&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Lck-Ttl" value="@{Lck-bonus}+@{Lck-base}+@{Lck-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Lck-bonus" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Lck-base" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Lck-racial" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Lck-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Def"&gt;Def&lt;/button&gt;&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Def-Ttl" value="@{Def-bonus}+@{Def-base}+@{Def-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Def-bonus" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Def-base" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Def-racial" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Def-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Res"&gt;Res&lt;/button&gt;&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Res-Ttl" value="@{Res-bonus}+@{Res-base}+@{Res-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Res-bonus" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Res-base" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Res-racial" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Res-growth" value="0" min="0" max="255"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;&lt;button type="roll" class="sheet-skillbtn" name="roll_Con"&gt;Con&lt;/button&gt;&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Con-Ttl" value="@{Con-bonus}+@{Con-base}+@{Con-racial}" disabled="true"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&gt;&lt;input type="number" name="Con-bonus" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Con-base" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class="sheet-compact"&gt;&lt;input type="number" name="Con-racial" value="0"&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td&nbsp; class="sheet-compact" style="text-align=center;"&gt;N/A&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &lt;/table&gt; Also, some people would advise against using tables and instead using divs and spans since tables can introduce some problems and incompatibilities for layout.&nbsp; For basic layout/design, tables are probably fine.&nbsp; Just thought I would mention it.&nbsp; Cheers