htmlで複数行表示した際にボタンを自動的に下にずらす
解決したいこと
現在、ホームページを作成しておりますが、htmlで表示させた場合に一行だけですと画面内に収まりますが、行数が増えていくとその下にあるボタンにかぶさってしまいます。
表示する行数が増えた場合に自動的に下に伸ばす方法はございますでしょうか?
発生している問題・エラー
エラーメッセージはございません。
下記、コードに記載の結果、キャンセル、戻りのボタンが表にかぶってしまいます。
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="justsystems:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows">
<title>タイトル</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body bgcolor="#a9a9a9">
<table border="1" height="252" width="818">
<tr bgcolor="gray" style="color:white" height="50">
<th height="42" size=10><b>注文日</b></th>
<th height="42" width="212">注文名/オプション<br>注文先・個数</th>
<th height="42" size=10>合計金額/合計個数</th>
<th height="42" size=20><b>注文者/入力者</b></th>
</tr>
ーーーここでテーブルから複数行取得
<% for(var i in content) { %>
<tr bgcolor="lightyellow">
<% var obj = content[i]; %>
<td align="center" height="47" size="10">
<input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日">
</td>
<td align="center" height="47" width="10" style="white-space:nowrap;" >
<input type="text" name=注文名 size=4 style="background:white; color:#000000;" align="middle" value="注文名">
<input type="text" name=オプション size=1 style="background:white; color:#000000;" align="middle" value="無">
<input type="text" name=注文先 size=4 style="background:white; color:#000000;" align="middle" value="注文先">
<input type="text" name=単価 size=1 style="background:white; color:#000000;" align="middle" value="単価">
<input type="text" name=個数 size=1 style="background:white; color:#000000;" align="middle" value="個数">
</td>
<td align="center" height="47" size=10>
<input type="text" name=合計金額 size=10 style="background:white; color:#000000;" align="middle" value="合計金額">
<input type="text" name=合計数 size=10 style="background:white; color:#000000;" align="middle" value="合計数">
</td>
<td align="center" height="47" size=20>
<input type="text" name=注文者 size=20 style="background:white; color:#000000;" align="middle" value="注文者">
<input type="text" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="入力者">
</td>
</tr>
<% } %>
</table>
<div style="width : 468px;height : 16px;top : 486px;left : 441px;position : absolute; z-index : 2; " id="Layer7" align="right">
<input type="submit" value=" 結果 ">
<input type="button" value=" キャンセル ">
<input type="button" value=" 戻 り ">
</div>
</form>
</div>
</body>
</html>
自分で試したこと
の中身を整理。→ボタンが画面右上にすっ飛びました(笑)
0