HTML 表格表现顽固

Question

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

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

我已经使用<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 元素设置样式，为实际控件设置样式（Input、Select 等）

Answer 3

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

<input style="width: ...