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

不要设置TD元素的样式，样式实际控件（输入，选择等）

Answer 2

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

<input style="width: ...

Answer 3

我不确定它在其他浏览器中的效果如何，但这在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 4

目前，从上面的来源，该表具有“100％”宽度，这意味着，所有可用的水平空间。

TD没有任何宽度预设，因此分配“均匀”，1/3或33％。

这是可能的，因为内部元素（输入和文本点头）也没有任何宽度预设。

你可以给TD一个宽度，但这不会改变输入的任何东西，它们保持在大约30个字符的“默认”。

实现目标的最简单方法：

1。）保持原样。 2.）在你想要的内容上明确设置输入字段的宽度和'*'textnode

#firstname {
width: 135px;
}


 <tr><td><strong>First name: </strong></td><td><input tabindex="1" type="text" 
name="requiredfirstname" id="firstname" maxlength="30"/></td><td> *</td></tr>

Answer 5

您可以使用单个<input type=tel>字段作为电话号码来避免此问题。将其划分为三个字段对于可用性是不利的（例如，用户不能方便地剪切和粘贴他的电话号码）。

如果您继续使用三个字段作为电话号码，则需要设置这些字段的宽度，使其组合宽度加上它们之间的任何间距等于同一列的其他单元格中字段的宽度。这是可能的，但是很麻烦，并且会使布局更加严格（具有像素宽度）。