rails bootstrap4 table レスポンシブ 忘備録

まず table-responsive で囲む

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>

そこの親に overflow-auto を設定

  <div class="col-lg-12 overflow-auto">    
      <!--顧客一覧、searchと兼用  -->
      <%= render 'clients/clients_index' %>
    </div>

ついでに文字が折り返さないように、縦にならないように

<th scope="col" class="text-nowrap"></th>

を設定 テーブルにもbootstrapのクラスが当てられる。

f:id:happy_teeth_ago:20190320125032p:plain