[Question] thead alignment

I have three tables using table heads. The code looks very similar to me, with the main difference that the unaligned table has a roll button. Weapons and Vehicles align with the text entry below but the skills table doesn't. <div class='sheet-colrow'> <h4 class="section-head">Vehicles</h4> <div class="section"> <table style="width:100%"> <thead> <th style="width:20%">Vehicle</th> <th style="width:10%">PM</th> <th style="width:10%">PL</th> <th style="width:10%">Cruise</th> <th style="width:10%">Max</th> <th style="width:10%">Range</th> <th style="width:10%">Ram</th> <th style="width:10%">MP</th> <th style="width:10%">Price</th> </thead> </table> <table style="width:100%"> <tr> <td style="width:20%"><input style="width:100%" type="text" name="attr_vehicle1"/></td> <td style="width:10%"><input style="width:100%" type="text" name="attr_PMV1"/></td> <td style="width:10%"><input style="width:100%" type="text" name="attr_PL1"/></td> <td style="width:10%"><input style="width:100%" type="text" name="attr_cruise1"/></td> <td style="width:10%"><input style="width:100%" type="text" name="attr_max1"/></td> <td style="width:10%"><input style="width:100%" type="text" name="attr_range1"/></td> <td style="width:10%"><input style="width:100%" type="text" name="attr_ram1"/></td> <td style="width:10%"><input style="width:100%" type="text" name="attr_mp1"/></td> <td style="width:10%"><input style="width:100%" type="text" name="attr_pricev1"/></td> </tr> </table> </div> </div> and for the unaligned Skills <div class='sheet-colrow'> <h4 class="section-head">Skills</h4> <div class="section"> <table style="width:100%"> <thead> <th style="width:28%">Skill</th> <th style="width:17%">Formula</th> <th style="width:17%">Formula Total</th> <th style="width:17%">Skill Rank</th> <th style="width:17%">Base Chance</th> <th style="width:4%">Roll</th> </thead> </table> <table style="width:100%"> <tr> <td style="28%"><input style="width:100%" type="text" name="attr_boating" value="Boating" disabled="true"/></td> <td style="17%"><input style="width:100%" type="text" name="attr_boating_formula" value="([DEX+PER])/2" disabled="true"/></td> <td style="17%"><input style="width:100%" type="text" name="attr_boating_total" value="(@{dex}+@{per})/2" disabled="true"/></td> <td style="17%"><input style="width:100%" type="text" name="attr_boating_rank" value="0" disabled="true"/></td> <td style="17%"><input style="width:100%" type="text" name="attr_boating_base_chance" value="@{boating_total}+@{boating_rank}" disabled="true"/></td> <td style="4%"><button type='roll' value="" name="roll_boating_check"/></td> </tr> </table> </div> </div> I'll continue to play about and try to get it aligned but hoped someone might be able to spot a simple error that I have made. Thanks

Well, the first thing I'd say is your <td> style calls are missing the "width:" and only have a percentage. In theory, since you've defined the width in the <th> tags, I don't know that the styles are even necessary in the <td> tags. Edit: You're also missing the semicolon after all the width calls. The correct formatting should be: <td style="width: 28%;"> <th style="width: 28%;"> Something like that. The system is a little forgiving, but I'd correct that on all your width calls, just to be sure.

Fixed. Thank You. Trying to learn character sheets by trial and error at the moment. Bur missing "width:"!!! Classic case of not seeing the wood for the trees. Much appreciated.

Also, be aware that splitting the thead elements out into their own table means that if something happens to override the size (e.g. overflow) in one of the tables, the other table's columns won't be resized to match. Unless you have a particular reason for making them separate tables, you're probably better off with the thead elements in the same table as the associated contents.

That's good to know. A lot of what i'm doing at the moment is taking elements from other sheets and working out how they work. I wouldn't have picked that up.

There is literally zero reason to have your thead in a separate table. As manveti points out, it can cause problems, and it will not solve anything. I strongly recommend removing the first </table> and the second <table style="width:100%"> for each of these sections. (This would also permit you to remove the widths on your td elements, as they would be lining up with your th elements which already have widths set. That means if you ever want to go back and change the widths of your columns, you only need to change it in one place.) It's also worth pointing out that if all you want to do is use a row of th elements, you don't really even need thead, just put them in a tr like your tds. Also also, if you stick with the thead, you should put those th elements within a tr (within the thead). Not doing so makes your markup invalid, and the browser may display your table in an unexpected fashion.

Thanks Brian. I will make those changes . It was not a decision really I looked through the code for quite a few sheets and it seemed the most common way to achieve what I was after. So I am more than happy to change.