HTML表单表格行为顽固

Question

我已经尝试设置了输入、td、tr、table、div和其他所有可用的选项的样式。这些都是在谷歌上找到的建议，所以不要怪我。

我正在努力修复这张表，但它就是不想看起来像我想要的样子。

我已经用过<td style="width:100%";>, <td style="width:100px";>, <td width="100%">, <td width="100px">了，继续...

第一张图片是它的外观，第二张是我需要和希望它看起来是什么样子：

​

​

下面是代码(没有好看的奖励)：

<div class="mail" style="width:600px">
<form onSubmit="return checkrequired(this)" action="includes/mail.php" method="POST">
<table border="0" style="width:100%">
<tr><td><strong>First name: </strong></td><td><input tabindex="1" type="text" name="requiredfirstname" maxlength="30"/></td><td> *</td></tr>
<tr><td><strong>Last name: </strong></td><td><input tabindex="2" type="text" name="requiredlastname" maxlength="30"/></td><td> *</td></tr>
<tr><td><strong>Shipping address: </strong></td><td><input tabindex="3" type="text" name="requiredshippingaddress" maxlength="30"/></td><td> *</td></tr>
<tr><td><strong>Shipping address 2: </strong></td><td><input tabindex="4" type="text" name="shippingaddress_2" maxlength="30"/></td></tr>
<tr><td><strong>City: </strong></td><td><input type="text" name="requiredcity" value="<?= $town ?>" maxlength="30"/><br /></td><td> *</td></tr>
<tr><td><strong>State: </strong></td><td><select name="state">
  <option value="<?= $state ?>"><?= $state ?></option>
  <option value="Alabama">Alabama</option>
  <option value="Alaska">Alaska</option>
  <option value="Arizona">Arizona</option>
  <option value="Arkansas">Arkansas</option>
  <option value="California">California</option>
  <option value="Colorado">Colorado</option>
  <option value="Connecticut">Connecticut</option>
  <option value="Delaware">Delaware</option>
  <option value="Florida">Florida</option>
  <option value="Georgia">Georgia</option>
  <option value="Hawaii">Hawaii</option>
  <option value="Idaho">Idaho</option>
  <option value="Illinois">Illinois</option>
  <option value="Indiana">Indiana</option>
  <option value="Iowa">Iowa</option>
  <option value="Kansas">Kansas</option>
  <option value="Kentucky">Kentucky</option>
  <option value="Louisiana">Louisiana</option>
  <option value="Maine">Maine</option>
  <option value="Maryland">Maryland</option>
  <option value="Massachusetts">Massachusetts</option>
  <option value="Michigan">Michigan</option>
  <option value="Minnesota">Minnesota</option>
  <option value="Mississippi">Mississippi</option>
  <option value="Missouri">Missouri</option>
  <option value="Montana">Montana</option>
  <option value="Nebraska">Nebraska</option>
  <option value="Nevada">Nevada</option>
  <option value="New Hampshire">New Hampshire</option>
  <option value="New Jersey">New Jersey</option>
  <option value="New Mexico">New Mexico</option>
  <option value="New York">New York</option>
  <option value="North Carolina">North Carolina</option>
  <option value="North Dakota">North Dakota</option>
  <option value="Ohio">Ohio</option>
  <option value="Oklahoma">Oklahoma</option>
  <option value="Oregon">Oregon</option>
  <option value="Pennsylvania">Pennsylvania</option>
  <option value="Rhode Island">Rhode Island</option>
  <option value="South Carolina">South Carolina</option>
  <option value="South Dakota">South Dakota</option>
  <option value="Tennessee">Tennessee</option>
  <option value="Texas">Texas</option>
  <option value="Utah">Utah</option>
  <option value="Vermont">Vermont</option>
  <option value="Virginia">Virginia</option>
  <option value="Washington">Washington</option>
  <option value="West Virginia">West Virginia</option>
  <option value="Wisconsin">Wisconsin</option>
  <option value="Wyoming">Wyoming</option>
</select></td></tr>
<tr><td><strong>Country: </strong></td><td> 
<select name="country">
  <option value="<?= $country ?>"><?= $country ?></option>
  <option value="US">United States</option>
  <option value="Canada">Canada</option>
</select></td></tr>
<tr><td><strong>Postal code: </strong></td><td><input type="text" name="requiredpostalcode" value="<?= $record->postal_code; ?>" maxlength="9"/></td><td> *</td></tr>
<tr><td><strong>Phone number: </strong></td><td><input type="text" name="areacode" value="<?= $record->area_code; ?>" maxlength="3"/>
<input tabindex="5" type="text" name="phonedigit3" maxlength="3"/>
<input tabindex="6" type="text" name="phonedigit4" maxlength="4"/></td></tr>
<tr><td><strong>E-mail: </strong></td><td><input tabindex="7" type="text" name="requiredemail" maxlength="30"/></td><td> *</td></tr>
<tr><td><strong>Message: </strong></td><td><textarea tabindex="8 "name="message" maxlength="250"></textarea></td></tr>
<tr><td><input tabindex="9" type="submit" value="Send"></td></tr>
</table>
</form>

Answer 1

我不确定它在其他浏览器中的表现如何，但这在chrome中看起来不错：

<tr>
<td><strong>Phone number: </strong></td>
<td>
<input type="text" name="areacode" value="<?= $record->area_code; ?>" maxlength="3" style="width:30px;"/>
<input tabindex="5" type="text" name="phonedigit3" maxlength="3" style="width:30px;"/>
<input tabindex="6" type="text" name="phonedigit4" maxlength="4" style="width:75px;" />
</td>
</tr>

注意:为了让它在不同的浏览器上看起来一致，你可能需要在所有输入上显式地设置宽度，就像在css中这样：

input[type="text"], select {
    width: 150px;
}

Answer 2

不设置TD元素的样式，设置实际控件的样式(输入、选择等)

Answer 3

style属性必须应用于input，而不是表单元格。

<input style="width: ...