html - HTML フォーム テーブルの頑固な動作

Question

入力、td、tr、テーブル、div、および利用可能なその他すべてのオプションのスタイルを設定しようとしました。これらはすべて Google で見つけた提案なので、私を責めないでください。

私はこのテーブルを修正するのに苦労していますが、私が望むように見せたくないだけです.

私は使っ<td style="width:100%";>, <td style="width:100px";>, <td width="100%">, <td width="100px">て続けています....

最初の写真はそれがどのように見えるか、2番目は私が必要としている方法と見たい方法です:

コードは次のとおりです（見栄えの良い賞はありません）：

<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

他のブラウザでうまく動作するかどうかはわかりませんが、これはクロムでうまく見えます:

<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: ...

Answer 4

現在、上記のソースから、テーブルの幅は「100 %」です。これは、使用可能なすべての水平スペースを意味します。

TD には幅の事前設定がないため、それぞれ 1/3 または 33% で「均等に」分配します。

内部要素 (入力およびテキストノード) にも幅の事前設定がないため、これが可能です。

TD に幅を与えることもできますが、それは入力の何も変更せず、約 30 文字の「デフォルト」のままです。

あなたが望むものを達成する最も簡単な方法：

1.) テーブルをそのままにしておきます。2.）入力フィールドの幅と「*」テキストノードを必要なものに明示的に設定します

#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>電話番号に1 つのフィールドを使用することで、この問題を回避できます。3 つのフィールドに分割すると、使いやすさが低下します (たとえば、ユーザーは自分の電話番号を簡単にカット アンド ペーストできません)。

電話番号に 3 つのフィールドを使用し続ける場合は、これらのフィールドの幅を設定して、それらを組み合わせた幅にフィールド間のスペースを加えたものが、同じ列の他のセルのフィールドの幅と等しくなるようにする必要があります。これは可能ですが、面倒であり、レイアウトがさらに固定化されます (ピクセル幅で)。