Rails5 レイアウトが崩れてしまう。

Question

Ruby on Railsを使い、CRUD処理をベースとしたスケジュール管理アプリを作成中です。
一覧にスケジュールを表示する際に項目の個数が同じだとレイアウトは崩れないのですが
ばらばらになるとレイアウトが崩れてしまいます。自動でレイアウトを調整できるような
CSSがあれば教えていただきたいです。よろしくお願いします。

Rails ver は5.0.7.2です。

下記の画像がレイアウトが崩れる前のものです。

レイアウトが崩れるとこのようになってしまいます。

#スケジュール一覧のhtmlです

<h2 class="heading3">スケジュール一覧</h2>
<% @users.each do |user| %>

  

  <div class="col-sm-6">  
  <div class="box30">
    <div class="box-title"><%= user.company %> <div class="index-icon">
        <td><%= link_to '', edit_user_path(user) ,class:"glyphicon glyphicon-edit box-icon"%></td>
        <td><%= link_to '', user, method: :delete, data: { confirm: '削除してもよろしいですか?' } ,class:"glyphicon glyphicon-trash box-icon" %></td></div></div>
     <table class="table-c">
          <tbody>
        <% user.schedules.each do |schedule| %>
         <% category=Category.find(schedule.category_id) %>
        
           
          
        <tr>
          <td><%= category.name %></td>
          <td><%=  schedule.time %></td>
        </tr>
        
      
        <% end %>
        <tr>
          <td>メモ</td>
          <td><%= user.memo %></td>
        </tr>
          <tbody> 
        </table>
          
          
          
        
    

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

Answer 1

tableの構造が乱れています。

<table>
 <tbody>
   <tr>
     <td><td>
   </tr>
 </tbody>
</table>

という構造を保ってください。
この<td></td>のなかに　
user.company、edit、delete,category.name, schedule.time
メモ user.memo
を納めれば揃います。

<td></td>のなかにさらに <table><tr><td>を入れ子することは可能です

二つづつ並べるのか。。。。
@users.each do |user|　のloopを二つづつ取り出すようにする方法と
一つのtrの中に @usersの数だけのtdをならべて、CSSで折り返しを実現
という方法があるかと思います。ただ、後者のCSSは私の力を越えます。

Comments

[yu_yu]

回答ありがとうございます。
プログラミング経験が１か月ほどなので前者の方で修正してみます！