我正在创建一个复杂的表单，玩家将使用它通过数据库保存自己的个人角色表。为此，我使用了很多输入标签，而对于布局，我使用表格来帮助我轻松地以正交方式进行设置。
对于输入，我使用修改其height、width和text-align 的类。
HTML
<div id="a_ability" class="advanced">
<h3>Advanced</h3>
<table id="tab02" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Ability</th>
<th scope="col">Temp Value</th>
<th id="tab02" scope="col">Bonus</th>
<th scope="col">Magic Obj</th>
</tr>
<tr>
<td>Strenght</td>
<td><input type="text" name="temp_str" class="50x50"></td>
<td><input type="text" name="bonus_str" class="50x50"></td>
<td><input type="text" name="mag_str" class="50x200"></td>
</tr>
<tr>
<td>Dexterity</td>
<td><input type="text" name="temp_dex" class="50x50"></td>
<td><input type="text" name="bonus_dex" class="50x50"></td>
<td><input type="text" name="mag_dex" class="50x200"></td>
</tr>
</table>
</div>
CSS
.50x50 {
height: 50px;
width: 50px;
text-align: center;
}
.50x200{
height: 50px;
width: 190px;
text-align: left;
padding-left: 10px;
}
这样做的结果就像该类根本不适用于标签。维度是默认维度，只有当我为每个输入应用一个 ID（工作不可能很长）或有时应用!important属性（但仅适用于某些 css 规则）时，我才能应用。
当我在没有启用“实时”选项的情况下使用“设计视图”时，我正在使用Dreamweaver（如果您知道该程序），一切似乎都很好，但是当我将设计视图放在输入上时，输入格式错误。
我检查过：
- 我没有任何css 冲突（例如，一个覆盖另一个规则的规则）
- 我已经检查了 Chrome 中的“检查”（例如），输入的宽度显然是 183px
它可能是浏览器的一些用户代理样式表吗？因为当我在 Chrome 中打开检查元素时，会有这一行：
width: 84px;
.advanced table tr td - 50px
它从css得到50px，但它从哪里得到84px？？该值根本没有规则！
我该如何解决这个问题？
我添加更多信息
这是 JSFiddle 链接链接，您可以看到它在输入样式中不起作用。我究竟做错了什么？