kansai5963
@kansai5963

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

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

2Answer

3つのボタンを囲っているdivについて、position: absolute;top left right bottomを使って配置をしていますが、これをやめることで解決します。

position: absolute;は周りの要素の影響を無視して配置されるので、兄弟であるテーブルと重なろうがお構いなしです。

positionをやめる代わりに、余白をつけたいならmarginpadding、右側に寄せたりしたいならdisplaytext-alightといったプロパティが使ってみてください。


画像追記:
Screenshot from 2020-09-15 14-43-35.png

0Like

Comments

  1. @kansai5963

    Questioner

    ご回答ありがとうございます。
    position: absoluteとtop left right bottomを削除する旨了解いたしました。
    ボタンが画面の右上にすっ飛ぶといったことはないですよね?
  2. それは再現していないのでよく分かりませんが、大丈夫だと思いますよ。

    例えばボタンを囲っているdivを↓のようにするだけで、さっきと大体同じ&テーブルと重ならないようになりませんか?

    `<div style="text-align: right; margin: 30px;" id="Layer7">`
  3. @kansai5963

    Questioner

    ご回答ありがとうございました。
    </table>の下に
    <div style="text-align: right; margin: 30px;" id="Layer7">
    <input type="submit" value=" 結果 ">
    <input type="button" value=" キャンセル ">
    <input type="button" value=" 戻  り ">
    </div>
    としたところ、ものの見事にボタンが画面右上にすっ飛んでしまいました(笑)
  4. スレッドに画像を添付しましたが、僕は起きませんね。

    ここで共有しているソースには無い問題によってそうなるんじゃないでしょうか?
  5. @kansai5963

    Questioner

    ご回答ありがとうございます。ブラウザは何をご利用いただいておりますか?
    私はIE11を使用しております。
  6. GoogleChromeですね。

    IEはそのように問題が多数起きますので、使わない&サポートしないの賢明かと思います。
  7. @kansai5963

    Questioner

    ご回答ありがとうございます。
    とある事情によりIEを使わなくてはならないため、もう少しいじくり倒してみます。

こんばんは。
ちょっと見た上での意見なので外れていたらすみませんw

基本的に@osaka596さんの修正でOKと思いますが、それで動作がうまくいかない場合、

  1. 他のスタイルが干渉している
  2. IEがタグを判定していない
    ことが考えられます。

試しに、読み込んでるスタイルシートを外したうえで@osaka5963さんの修正してみてはいかがてしょう。

また、body終了タグ直前のdivとformタグの始点が見当たらないのも気になります。
こちらも良ければ見てみてください!

0Like

Your answer might help someone💌