フロントエンドcontrols_html/css_WEB-ITnoseのレイアウトに関する質問

写真をご覧ください:
この写真の表 (枠線のあるもの) は元々、これを背景画像として使用する予定でしたが、拡大できず、見栄えが良くありません。実行後、ボディに img を追加し、その幅と高さを 100% に設定し、テキストを入力する場所にコントロールを追加しました。上の図は、実行前にコントロールを追加した後の様子を示しています。コントロールを div で配置し、位置を絶対に設定しますが、実行後は次のようになります。これは見にくいです: 既知の方法やテクニック、または背景画像を拡大するにはどうすればよいですか?

ディスカッションへの返信(解決策)

<style>	.t1>tbody>tr>td{border-top:1px solid #000;border-left:1px solid #000;}	.tr{border-right:1px solid #000;}	.tb{border-bottom:1px solid #000;}	td{padding:5px;}	table table td{border-bottom:1px solid #000;border-right:1px solid #000;}</style><table class="t1" cellpadding="0" cellspacing="0">	<tr><td>申请人姓名</td><td class="tr"><input/></td></tr><tr><td class="tb">性别</td><td style="padding:0px;"><table cellpadding="0" cellspacing="0">		<tr><td><select>			<option>男</option>			</select></td><td>身份证号码</td><td><input/></td></tr>		</table></td></tr></table>

imgはパーセンテージで表示されるので、divの左上と幅の高さもパーセンテージで配置する必要があります

<style>	.t1>tbody>tr>td{border-top:1px solid #000;border-left:1px solid #000;}	.tr{border-right:1px solid #000;}	.tb{border-bottom:1px solid #000;}	td{padding:5px;}	table table td{border-bottom:1px solid #000;border-right:1px solid #000;}</style><table class="t1" cellpadding="0" cellspacing="0">	<tr><td>申请人姓名</td><td class="tr"><input/></td></tr><tr><td class="tb">性别</td><td style="padding:0px;"><table cellpadding="0" cellspacing="0">		<tr><td><select>			<option>男</option>			</select></td><td>身份证号码</td><td><input/></td></tr>		</table></td></tr></table>

完了しましたのでhtml を使用すると、完全な図がここにあります。見てみるのを手伝ってください。重要なのは、td が不規則に、1 つが大きく、もう 1 つが小さく設定されている理由がわからないということです。添付画像: