bootstrapのtableとgridの相性はよく分からないのでとりま放置で

テーブルの表示がイマイチいけてないのをどうにかしたい。

bootstrapのtable x gridsystemを使ってみる

qiita.com

もともとscaffoldで作成してたのでテーブル出力されてる表に、
bootstrapのgridシステムを適用させてみる。

[ .html.erb ]

  <div class="table-responsive">
    <table class="table table-striped table-bordered table-condensed newline">
      <thead>
        <tr style="font-size: 80%">
          <!-- Anime titleは非表示 -->
          <th class="col-xs-2 col-ms-2 col-md-2 col-lg-2">Profile</th>
          <th class="col-xs-2 col-ms-2 col-md-2 col-lg-2">Op title</th>
          <th class="col-xs-1 col-ms-1 col-md-1 col-lg-1">Op artist</th>
          <th class="col-xs-1 col-ms-1 col-md-1 col-lg-1">Op movie</th>
          <th class="col-xs-2 col-ms-2 col-md-2 col-lg-2">Ed title</th>
          <th class="col-xs-1 col-ms-1 col-md-1 col-lg-1">Ed artist</th>
          <th class="col-xs-1 col-ms-1 col-md-1 col-lg-1">Ed movie</th>
          <th colspan="2"></th>
        </tr>
      </thead>

      <tbody>
        <% @anime_details.each do |anime_detail| %>
          <tr>
            <!-- anime_detail.anime_title_id は非表示 %-->
            <td class="col-xs-2 col-ms-2 col-md-2 col-lg-2 fontmini"><%= anime_detail.profile %></td>
            <td class="col-xs-2 col-ms-2 col-md-2 col-lg-2"><%= anime_detail.op_title %></td>
            <td class="col-xs-1 col-ms-1 col-md-1 col-lg-1"><%= anime_detail.op_artist %></td>
            <td class="col-xs-1 col-ms-1 col-md-1 col-lg-1 fontmini"><%= anime_detail.op_movie %></td>
            <td class="col-xs-2 col-ms-2 col-md-2 col-lg-2"><%= anime_detail.ed_title %></td>
            <td class="col-xs-1 col-ms-1 col-md-1 col-lg-1"><%= anime_detail.ed_artist %></td>
            <td class="col-xs-1 col-ms-1 col-md-1 col-lg-1 fontmini"><%= anime_detail.ed_movie %></td>
            <td class="col-xs-2 col-ms-2 col-md-2 col-lg-2">
              <%= link_to '表示', action: :show, anime_title_id: anime_detail.anime_title_id, id: anime_detail.id %>
              <%= link_to '編集', action: :edit, anime_title_id: anime_detail.anime_title_id, id: anime_detail.id %>
              <%= link_to '削除', {action: :destroy, anime_title_id: anime_detail.anime_title_id, id: anime_detail.id}, {method: :delete, data: {confirm: '削除してよろしいですか？'}} %>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>

[ .scss ]

//table-responsiveでテーブル内要素が折り返されるようにする
.newline {
  word-break: break-all;
  word-wrap: break-word;
}

//anime_detailのテーブル用
.fontmini{
  font-size:10px;
}

それっぽくはなったんだけれども。col-xs-2、col-ms-2がうまく動かない。
多分列を詰め込みすぎなのが悪い気がする。

まぁそこまでココは使わないので、表示、編集、削除の列を頭に持ってくるくらいの変更。

まぁこんな感じで見れればいいかー。

TODO:
フォームの例外処理エラーがおかしい
トップからtitle/showへの遷移、２回目以降がなぜかおかしな位置（ページ中段）に遷移するので修正
【一応完了】detailページのレイアウト直すのとdetail -> title/showの動線を置く
動画URLもっと楽に入れたい