常連

### 前提・実現したいこと
bodyのwidth内に.tableを収めたい。
あるいはモーダル表示を途切れない様に表示させたい。
願わくば、上記両方を実現したい。
※スマホ表示の時のみ解決できてば本件の問題はクリアとなります。

目指している形は下記の画像のようにモーダルがしっかり全体が見え、操作に支障がないようにしたい。
※PC画面のwidthでの操作例となります。
![目指している形](a20abde0112bb925e860c4da7c971188.png)


### 発生している問題・エラーメッセージ
編集モーダルを表示させるとモーダルが途中で途切れてしまい、スクロールなどもできず、固定されている。
![途切れているモーダル](e3ddb183830323229f2ef8712d50fc2a.png)


下記添付1画像のようにbodyのwidth内にtableが収まらないのが原因のように現在は受け取っています。
![イメージ説明](73ed40d1e71aea4ec4d5ecea51957a53.png)

viewの.tableはbootstrap4の.tableを使用しています。
```ruby
テーブルのページです
[edit.html.erb]

<% provide(:title, '履歴') %>
<% provide(:home, 'history') %>
<% provide(:navbar_text, 'black') %>

<div class="container">
  <div class="table-responsive">
    <div class="w-50"><%= render 'shared/flash_messages' %></div>
    <h1 class="text-center health-top">履歴</h1>
    
    <table class="table table-bordered table-condensed table-hover table-striped" id="table-healths">
      <thead>
        <tr>
          <th rowspan="2">日付</th>
          <th rowspan="2">曜日</th>
          <th colspan="2">体情報</th>
          <th colspan="3">睡眠情報</th>
          <th rowspan="2">水分</th>
          <th rowspan="2">お通じ</th>
          <th rowspan="2">編集</th>
        </tr>
        <tr>
          <th>体重</th>
          <th>体脂肪</th>
          <th>就寝時間(前日)</th>
          <th>起床時間</th>
          <th>睡眠時間</th>
        </tr>
      </thead>
    
      <tbody>
        <% @healths.each do |h| %>
          <tr>
            
            <td class='<%= css_class(h.day) %> pr-0 pl-0'><%= l(h.day, format: :short) %></td>
            
            <td class='<%= css_class(h.day) %>'>
              <%= $days_of_the_week[h.day.wday] %>
            </td>
            
            <td>
              <% if h.weight.present? %>
                <%= h.weight %>
                <%= 'kg' %>
              <% end %>
            </td>
            
            <td>
              <% if h.body_fat.present? %>
                <%= h.body_fat %>
                <%= '%' %>
              <% end %>
            </td>
            
            <td>
              <% if h.bedtime_at.present?  %>
                <%= l(h.bedtime_at, format: :short) %>
              <% end %>
            </td>
            
            <td>
              <% if h.getuptime_at.present? %>
                <%= l(h.getuptime_at, format: :short) %>
              <% end %>
            </td>
            
            <td>
              <% if h.bedtime_at.present? && h.getuptime_at.present? %>
                <%= sleeping_time(h, h.bedtime_at, h.getuptime_at) %>
              <% end %>
            </td>
            
            <td>
              <% if h.water == true %>
                <%= "摂取あり" %>
              <% end %>
            </td>
            
            <td>
              <% if h.bowel_movement == true %>
                <%= "あり" %>
              <% end %>
            </td>
            
            <td>
              <div>
              <% if h.day <= Date.today %>
                <%= link_to "編集", user_healths_edit_day_path(@user.user_id, h.id), remote: true, 
                                                                                      class: "btn btn-success btn-sm" %>
              <% end %>
              </div>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>

<div id="edit_day" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>

```
```ruby
モーダルページです
[_edit_day.html.erb]

<div class="modal-dialog modal-width">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"><%= l(@health.day, format: :long) %>の編集</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body">
        <%= form_with model: @health, url: user_healths_update_day_path(@user, @health) do |f| %>
        <table class="table table-bordered table-condensed table-hover table-striped health_day_table" id="table-healths">
          <thead>
            <tr>
              <th rowspan="2">日付</th>
              <th rowspan="2">曜日</th>
              <th colspan="2">体情報</th>
              <th colspan="3">睡眠情報</th>
              <th rowspan="2">水分</th>
              <th rowspan="2">お通じ</th>
            </tr>
            <tr>
              <th>体重</th>
              <th>体脂肪</th>
              <th>就寝時間(前日)</th>
              <th>起床時間</th>
              <th>睡眠時間</th>
            </tr>
          </thead>
      
          <tbody>
            <tr>
              
              <td class='<%= css_class(@health.day) %> pr-0 pl-0'><%= l(@health.day, format: :short) %></td>
              
              <td class='<%= css_class(@health.day) %>'>
                <%= $days_of_the_week[@health.day.wday] %>
              </td>
              
              <td>
                <%= f.number_field :weight, step: "0.1", class: "form-control", min: 1, max: 150,
                                                                 autofocus: true,
                                                                 required: true %>
              </td>
              
              <td>
                <%= f.number_field :body_fat, step: "0.1", class: "form-control", min: 0, max: 30 %>
              </td>
              
              <td>
                <%= f.time_field :bedtime_at, class: "form-control", 
                                          autofocus: true,
                                           required: true %>
              </td>
              
              <td>
                <%= f.time_field :getuptime_at, class: "form-control" %>
              </td>
              
              <td>
                <% if @health.bedtime_at.present? && @health.getuptime_at.present? %>
                  <%= sleeping_time(@health, @health.bedtime_at, @health.getuptime_at) %>
                <% end %>
              </td>
              
              <td>
                <%= f.check_box :water, {}, true, false %>
              </td>
              
              <td>
                <%= f.check_box :bowel_movement, {}, true, false %>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="edit-day-btn">
          <%= f.submit class: "btn btn-flat-border w-50" %>
        </div>
        <% end %>
      </div>
    </div>
  </div>
```
```scss
// テーブル

* {
	float: none;
	position: static;
}
 
img {
	max-width: 100%;
	height: auto;
}

#table-healths {
  // table-layout: fixed;
  th {
    vertical-align: middle;
    text-align: center;
  }
  td {
    vertical-align: middle;
    text-align: center;
  }
}

.col-sm-12 {
  width: 100%;
	overflow-x: scroll;
}

.col-12 {
  table-layout: fixed;
}

```

### 試したこと
.table-responsiveを.containerと.tableのあいだに記述しすれば解決するかと思い、実践。
結果はbody内に収まるわけではなく収まらない分の.tableをスクロールで閲覧が可能となる。
また、モーダルは添付画像の様に途中から見切れてしまい、固定されてしまいます。
こちらにつきましては、bodyのwidth分しか表示されていないことが原因のように受け取ります。
![見切れているモーダル](27e49e327e693e2ca85a1f77090405d9.png)

他にはbodyにクラスをつけて半ば強引にwidthを調整しました。
```scss
.history {
  width: fit-content;
}
```
結果はスマホ画面の幅ではなく、PC画面サイズでの表示になる為モーダルも右隅が入りきらない状況です。
惜しいといえば惜しいのですが、スマホ画面に対応という観点では少々方向性が違う気がしています。
![fit-content](109388f5d5d594ab3746bf66da8c81f9.png)

大変恐れ入りますが、お力をお貸しいただけますようお願い致します。

### 補足情報（FW/ツールのバージョンなど）

Bootstrap 4.1.1
rails 5.2.3
ruby 2.6.3
cloud9

質問編集履歴