[HTML CSS]tableの下に書いたdivが浮いてしまう。

Question

いつもお世話になっております。
個人でポートフォリオを作っています。
言語はhtml css ruby フレームワークはrails5を使用しています。

今回、サインアップ・ログイン画面を作成するにあたり、フォームをtableタグで作成しました。
tableタグの下にdivタグで囲ったsubmitを記入しているが、そのdivタグがどうしても浮いてしまいます。
以下、コードと画像です。
初学者なので読みづらいかもしれませんが、ご容赦ください。

new.html.erb

<div class="wrapper">
  <div class="resistration-wrapper">
    <h2>サインアップ</h2>
    <table class="form-table">
      <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
      <tbody>
        <%= render "devise/shared/error_messages", resource: resource %>
          <tr>
            <th>名前</th>
            <td><%= f.text_field :name, placeholder: "suke", id: "name" %></td>
          </tr>
          <tr>
            <th>メールアドレス</th>
            <td><%= f.email_field :email, placeholder: "[e-mail]" %></td>
          </tr>
          <tr>
            <th>パスワード</th>
            <td><%= f.password_field :password, autocomplete: "new-password", placeholder: "arigatou" %></td>
          </tr>
          <tr>
            <th>パスワード確認</th>
            <td><%= f.password_field :password_confirmation, autocomplete: "new-password", placeholder: "arigatou" %></td>
          </tr>
          </tbody>
          <div class="action-wrapper">
            <%= f.submit "サインアップ", class: "action" %>
          </div>
        <% end %>
      
      
    </table>
    
  </div>
</div>

application.css

/* start resistration css */
.resistration-wrapper > h2 {
    color: #cc2931;
}
table {
    border-collapse: collapse;
    background-color: rgba(228, 218, 171, 0.5);
}

.form-table,
input,
select, 
button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    border: none;
    outline: none;
    box-shadow: none;
} 

.form-table input {
    background: #f8f8f8;
    display: block;
    font-size: 16px;
    padding: 12px 15px;
    width: 480px;
    transition: 0.8s;
    border-radius: 3px;
}


.form-table input:focus {
    background: #e9f5fb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.form-table input#name {
    width: 240px;
}

input::placeholder {
  color: #ccc;
}
.form-table {
    width: 100%;
}
.form-table th,
.form-table td {
  padding: 20px;
}
 
.form-table th {
  padding-left: 50px;
  position: relative;
  text-align: left;
  width: 300px;
  color: #cc2931;
  font-size: 20px;
}

.form-table input.action {
    width:150px;
    background: #313186;
    color: #f5f5ff;
}

/* end resistraiton css */

サインアップと書かれたsubmitボタンが浮いてしまいます。
理想はパスワード情報のinputタグの右端に揃えたいです。

ご教示いただければ幸いです。
よろしくお願い致します。

Answer 1

<table>の子要素に<div>があると、崩れます。 .action-wrapperを<table>タグの外に出すようにすると、CSS的には崩れずに済みますが.. `form_for`や<`% end %>`の位置を変更することは可能でしょうか?

<table>
  ...
</table>
<div class="action-wrapper">
  <%= f.submit "サインアップ", class: "action" %>
</div>

Comments

[kosuke_ikeura]

ありがとうございます。
解決しました。
こんな単純なことに2時間頭を悩ませていたことが、、
ありがとうございました！！