I did this on the Exalted 2e sheet: Here's the HTML for the section above (with the long list of options in the select dropdowns cut out for space): <div class="combat-equipment">
<div class="weapons" style="width: 67%">
<div style="width: 32%; display: inline-block" class="center"><button class="tokenaction blank-roll-button" type="roll" name="roll_JoinBattle" value="/me joins the fight\n/r (@{Wits}+@{Awareness}*(1-@{Awareness|max})+?{Stunt or Specialty|0})t[exalted] &{tracker}">Join Battle</button></div>
<div style="width: 32%; display: inline-block" class="center"><button class="tokenaction blank-roll-button" type="roll" name="roll_JoinDebate" value="/me joins the argument\n/r (@{Wits}+@{Awareness}*(1-@{Awareness|max})+?{Stunt or Specialty|0})t[exalted] &{tracker}">Join Debate</button></div>
<div style="width: 32%; display: inline-block" class="center"><button class="tokenaction blank-roll-button" type="roll" name="roll_JoinWar" value="/me joins the war\n/r (@{Wits}+@{War}*(1-@{War|max})+?{Stunt or Specialty|0})t[exalted] &{tracker}">Join War</button></div>
<div class="vspace"></div>
<span class="span-header center" style="padding: 0px; width: 130px">Weapon / Attack</span>
<span class="span-header center" style="padding: 0px; width: 49px">Speed</span>
<span class="span-header center" style="padding: 0px; width: 72px">Accuracy</span>
<span class="span-header center" style="padding: 0px; width: 72px">Damage</span>
<span class="span-header center" style="padding: 0px; width: 72px">Defense</span>
<span class="span-header center" style="padding: 0px; width: 72px">Range</span>
<span class="span-header center" style="padding: 0px; width: 72px">Rate</span>
<fieldset class="repeating_attacks">
<div class="attack">
<input type="text" class="fancy" style="width: 134px" name="attr_AttackName" />
<input type="number" class="fancy very-narrow" style="width: 50px; margin-left: -4px" name="attr_AttackSpeed" min="3" value="6" />
<input type="number" class="fancy very-narrow" style="width: 73px; margin-left: -4px" name="attr_AttackAccuracy" value="0" />
<select name="attr_AttackDamageType" class="fancy very-narrow" style="width: 73px; margin-left: -4px"><!-- options removed --></select>
<input type="number" class="fancy very-narrow" style="width: 73px; margin-left: -4px" name="attr_AttackDefense" value="0" />
<input type="number" class="fancy very-narrow" style="width: 73px; margin-left: -4px" name="attr_AttackRange" min="0" />
<input type="number" class="fancy very-narrow" style="width: 75px; margin-left: -4px" name="attr_AttackRate" min="1" value="1" />
</div>
<div class="rolls sheet-2colrow" style="width: 535px">
<div style="float: right; height: 74px">
<div style="padding-top: 18px">
<h3 class="center" style="display: inline-block">Parry DV</h3>
<input type="number" name="attr_AttackParry" disabled="true" value="ceil((@{AttackAttribute}+@{AttackAbility}+@{AttackSpecialty}+@{AttackDefense})/2)" />
</div>
</div>
<div>
<button style="width: 76px" class="blank-roll-button" type="roll" name="roll_AttackRoll" value="/r (@{AttackAttribute}+@{AttackAbility}+@{AttackSpecialty}+@{AttackAccuracy}+?{Bonus Dice (Charms, Stunts, etc.)|0})t[exalted]+?{Automatic Successes|0}">Attack:</button>
<select name="attr_AttackAttribute" class="regular fancy"><!-- options removed --></select>
+
<select name="attr_AttackAbility" class="regular fancy"><!-- options removed --></select>
+
<input type="number" class="fancy" name="attr_AttackSpecialty" min="0" max="3" value="0" title="Specialty" />
</div>
<div>
<button class="blank-roll-button" type="roll" name="roll_AttackDamage" value="/r [[{?{Minimum Damage|1},@{AttackDamage}+@{AttackDamageAttribute}+@{AttackDamageAbility}+?{Bonus Dice (Charms, Threshold Successes etc.)|1}-?{Target Soak|0}}kh1]]t[exalted]+?{Automatic Successes|0} @{AttackDamageType}">Damage:</button>
<select name="attr_AttackDamageAttribute" class="regular fancy"><!-- options removed --></select>
+
<select name="attr_AttackDamageAbility" class="regular fancy"><!-- options removed --></select>
+
<input type="number" name="attr_AttackDamage" class="fancy" title="Damage" value="0" />
</div>
</div>
</fieldset>
</div>
<div class="armor">
<h3 class="center">Armor</h3>
<label>Type: <input type="text" name="attr_ArmorType" /></label>
<div style="margin-bottom: 10px">
<label style="display: inline">Bashing:</label> <input type="number" class="fancy" name="attr_ArmorBashingSoak" min="0" value="0" />
<label style="display: inline">|</label>
<label style="display: inline">Lethal:</label> <input type="number" class="fancy" name="ArmorLethalSoak" min="0" value="0" />
</div>
<label>Fatigue: <input type="number" name="attr_ArmorFatigue" min="0" value="0" /></label>
<label>Mobility: <input type="number" name="attr_ArmorMobility" max="0" value="0" /></label>
<label style="display: block">
Description:<br />
<textarea class="two-lines" name="attr_ArmorDescription"></textarea>
</label>
</div>
</div>
As you can see, I pretty much solved the problem by setting the widths of the "cells" in the table, forcing them to line up. The border around the edge was a matter of playing with the CSS: /* Each "header" cell */ .sheet-weapons span { border-top: 3px solid #000; }
/* The first "header" cell, the large "cell", and the first input (attack name) */ .sheet-weapons span:first-of-type,
.sheet-weapons .sheet-rolls,
.sheet-weapons .sheet-attack input:first-of-type { border-left: 3px solid #000; }
/* The last "header" cell, the large "cell", and the last input (rate) */
.sheet-weapons span:last-of-type,
.sheet-weapons .sheet-rolls,
.sheet-weapons .sheet-attack input:last-of-type { border-right: 3px solid #000; } /* The large "cell" of the last repeating item */ .repcontainer[data-groupname=repeating_attacks] .repitem:last-child .sheet-rolls { border-bottom: 3px solid #000; }
Note that the way this border CSS works, there is no bottom border until at least one item has been added:
