【Rails】一覧をリスト表示させるときにtheadを固定させたい

Question

CRMを作成中です。
顧客情報の一覧をリスト表示させたいのですが、idや業態などの項目が都度表示されて見栄えが悪いです。

<h1>顧客一覧</h1>
<div class="main customers-index">
  <div class="container">
    <% @customers.each.with_index(1) do |customer, i| %>
    <div class="customers-index-item">
  <table border="1">
  <thead>
  <tr>
    <th>id</th>
    <th>会社名</th>
    <th>業態</th>
    <th>お客様名</th>
    <th>担当者</th>
    <th>備考</th>
    <th></th>
  </tr>
  </thead>
  <tbody>
    <tr>
    <td><%= i %></td>
    <td><%= customer.company %></td>
    <td><%= customer.category %></td>
    <td><%= customer.name %></td>
    <td><%= customer.staff %></td>
    <td><%= customer.note %></td>
    <td><%= link_to("詳細", "/customers/#{customer.id}") %></td>
  </tr>
  </tbody>
  </table>

    <% end %>
    </div>
  </div>
</div>

こちらを下のスクショのように thead の項目を最上段にのみ表示させるにはどうすればよいでしょうか？
基礎的な質問で恐縮ですがアドバイスお願いいたします。

何個か試したパターンを追記します

その1. <% @customers.each.with_index(1) do |customer, i| %> を tbody の下に入れる

上のスクショのコードが以下

その2. 上段にあった <div class="container">
<% @customers.each.with_index(1) do |customer, i| %>
<div class="customers-index-item">
をtbodyに入れる

上のスクショのコードが以下

Answer 1

@customers.eachの場所を変えることで実現できるかもです！
例えば、以下のようにするといかがでしょうか。

<tbody>
<% @customers.each.with_index(1) do |customer, i| %>
  <tr>
    <td><%= i %></td>
    <td><%= customer.company %></td>
    <td><%= customer.category %></td>
    <td><%= customer.name %></td>
    <td><%= customer.staff %></td>
    <td><%= customer.note %></td>
    <td><%= link_to("詳細", "/customers/#{customer.id}") %></td>
  </tr>
<% end %>
</tbody>

Comments

[kazuki0714]

早速ありがとうございます。
他のパターンも試したのですが、なんかtbodyが崩れてしまいますね(^◇^;)
CSSで直せばいいのでしょうか？

[kazuki0714]

質問文の中に頂いたコードでのスクショを追加いたしましたのでご確認いただければ幸いです。

[hatsu]

その1の<% end %>の位置を</tr>の下に置いてみるとどうでしょう？

[kazuki0714]

できました！
<% end %> の位置でも変わるんですね！
ありがとうございます！

Answer 2

hatsu 様の回答を備忘録

<% end %> の位置を変えると解決

<h1>顧客一覧</h1>
<div class="main customers-index">
  <div class="container">
    <div class="customers-index-item">
  <table border="1">

  <thead>
  <tr>
    <th>id</th>
    <th>会社名</th>
    <th>業態</th>
    <th>お客様名</th>
    <th>担当者</th>
    <th>備考</th>
    <th></th>
  </tr>
  </thead>
<tbody>
  <% @customers.each.with_index(1) do |customer, i| %> <!-- theadの上にあったのをここに移した-->
    <tr>
    <td><%= i %></td>
    <td><%= customer.company %></td>
    <td><%= customer.category %></td>
    <td><%= customer.name %></td>
    <td><%= customer.staff %></td>
    <td><%= customer.note %></td>
    <td><%= link_to("詳細", "/customers/#{customer.id}") %></td>
  </tr>
  <% end %> <!-- </table>の下にあったのをここに移した -->
  </table>
    </div>
  </div>
</div>