Bootstrap4 .tableがbody内におさまりません。

前提・実現したいこと

bodyのwidth内に.tableを収めたい。
あるいはモーダル表示を途切れない様に表示させたい。
願わくば、上記両方を実現したい。
※スマホ表示の時のみ解決できてば本件の問題はクリアとなります。

目指している形は下記の画像のようにモーダルがしっかり全体が見え、操作に支障がないようにしたい。
※PC画面のwidthでの操作例となります。

発生している問題・エラーメッセージ

編集モーダルを表示させるとモーダルが途中で途切れてしまい、スクロールなどもできず、固定されている。

下記添付1画像のようにbodyのwidth内にtableが収まらないのが原因のように現在は受け取っています。

viewの.tableはbootstrap4の.tableを使用しています。

ruby
1テーブルのページです
2[edit.html.erb]
3
4<% provide(:title, '履歴') %>
5<% provide(:home, 'history') %>
6<% provide(:navbar_text, 'black') %>
7
8<div class="container">
9  <div class="table-responsive">
10    <div class="w-50"><%= render 'shared/flash_messages' %></div>
11    <h1 class="text-center health-top">履歴</h1>
12    
13    <table class="table table-bordered table-condensed table-hover table-striped" id="table-healths">
14      <thead>
15        <tr>
16          <th rowspan="2">日付</th>
17          <th rowspan="2">曜日</th>
18          <th colspan="2">体情報</th>
19          <th colspan="3">睡眠情報</th>
20          <th rowspan="2">水分</th>
21          <th rowspan="2">お通じ</th>
22          <th rowspan="2">編集</th>
23        </tr>
24        <tr>
25          <th>体重</th>
26          <th>体脂肪</th>
27          <th>就寝時間(前日)</th>
28          <th>起床時間</th>
29          <th>睡眠時間</th>
30        </tr>
31      </thead>
32    
33      <tbody>
34        <% @healths.each do |h| %>
35          <tr>
36            <!-- 日付 -->
37            <td class='<%= css_class(h.day) %> pr-0 pl-0'><%= l(h.day, format: :short) %></td>
38            <!-- 曜日 -->
39            <td class='<%= css_class(h.day) %>'>
40              <%= $days_of_the_week[h.day.wday] %>
41            </td>
42            <!-- 体重 -->
43            <td>
44              <% if h.weight.present? %>
45                <%= h.weight %>
46                <%= 'kg' %>
47              <% end %>
48            </td>
49            <!-- 体脂肪 -->
50            <td>
51              <% if h.body_fat.present? %>
52                <%= h.body_fat %>
53                <%= '%' %>
54              <% end %>
55            </td>
56            <!-- 就寝時間 -->
57            <td>
58              <% if h.bedtime_at.present?  %>
59                <%= l(h.bedtime_at, format: :short) %>
60              <% end %>
61            </td>
62            <!-- 起床時間 -->
63            <td>
64              <% if h.getuptime_at.present? %>
65                <%= l(h.getuptime_at, format: :short) %>
66              <% end %>
67            </td>
68            <!-- 睡眠時間 -->
69            <td>
70              <% if h.bedtime_at.present? && h.getuptime_at.present? %>
71                <%= sleeping_time(h, h.bedtime_at, h.getuptime_at) %>
72              <% end %>
73            </td>
74            <!-- 水分 -->
75            <td>
76              <% if h.water == true %>
77                <%= "摂取あり" %>
78              <% end %>
79            </td>
80            <!-- お通じ -->
81            <td>
82              <% if h.bowel_movement == true %>
83                <%= "あり" %>
84              <% end %>
85            </td>
86            <!-- 編集 -->
87            <td>
88              <div>
89              <% if h.day <= Date.today %>
90                <%= link_to "編集", user_healths_edit_day_path(@user.user_id, h.id), remote: true, 
91                                                                                      class: "btn btn-success btn-sm" %>
92              <% end %>
93              </div>
94            </td>
95          </tr>
96        <% end %>
97      </tbody>
98    </table>
99  </div>
100</div>
101
102<div id="edit_day" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>
103

ruby
1モーダルページです
2[_edit_day.html.erb]
3
4<div class="modal-dialog modal-width">
5    <div class="modal-content">
6      <div class="modal-header">
7        <h4 class="modal-title"><%= l(@health.day, format: :long) %>の編集</h4>
8        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
9      </div>
10      <div class="modal-body">
11        <%= form_with model: @health, url: user_healths_update_day_path(@user, @health) do |f| %>
12        <table class="table table-bordered table-condensed table-hover table-striped health_day_table" id="table-healths">
13          <thead>
14            <tr>
15              <th rowspan="2">日付</th>
16              <th rowspan="2">曜日</th>
17              <th colspan="2">体情報</th>
18              <th colspan="3">睡眠情報</th>
19              <th rowspan="2">水分</th>
20              <th rowspan="2">お通じ</th>
21            </tr>
22            <tr>
23              <th>体重</th>
24              <th>体脂肪</th>
25              <th>就寝時間(前日)</th>
26              <th>起床時間</th>
27              <th>睡眠時間</th>
28            </tr>
29          </thead>
30      
31          <tbody>
32            <tr>
33              <!-- 日付 -->
34              <td class='<%= css_class(@health.day) %> pr-0 pl-0'><%= l(@health.day, format: :short) %></td>
35              <!-- 曜日 -->
36              <td class='<%= css_class(@health.day) %>'>
37                <%= $days_of_the_week[@health.day.wday] %>
38              </td>
39              <!-- 体重 -->
40              <td>
41                <%= f.number_field :weight, step: "0.1", class: "form-control", min: 1, max: 150,
42                                                                 autofocus: true,
43                                                                 required: true %>
44              </td>
45              <!-- 体脂肪 -->
46              <td>
47                <%= f.number_field :body_fat, step: "0.1", class: "form-control", min: 0, max: 30 %>
48              </td>
49              <!-- 就寝時間 -->
50              <td>
51                <%= f.time_field :bedtime_at, class: "form-control", 
52                                          autofocus: true,
53                                           required: true %>
54              </td>
55              <!-- 起床時間 -->
56              <td>
57                <%= f.time_field :getuptime_at, class: "form-control" %>
58              </td>
59              <!-- 睡眠時間 -->
60              <td>
61                <% if @health.bedtime_at.present? && @health.getuptime_at.present? %>
62                  <%= sleeping_time(@health, @health.bedtime_at, @health.getuptime_at) %>
63                <% end %>
64              </td>
65              <!-- 水分 -->
66              <td>
67                <%= f.check_box :water, {}, true, false %>
68              </td>
69              <!-- お通じ -->
70              <td>
71                <%= f.check_box :bowel_movement, {}, true, false %>
72              </td>
73            </tr>
74          </tbody>
75        </table>
76        <div class="edit-day-btn">
77          <%= f.submit class: "btn btn-flat-border w-50" %>
78        </div>
79        <% end %>
80      </div>
81    </div>
82  </div>

scss
1// テーブル
2
3* {
4	float: none;
5	position: static;
6}
7 
8img {
9	max-width: 100%;
10	height: auto;
11}
12
13#table-healths {
14  // table-layout: fixed;
15  th {
16    vertical-align: middle;
17    text-align: center;
18  }
19  td {
20    vertical-align: middle;
21    text-align: center;
22  }
23}
24
25.col-sm-12 {
26  width: 100%;
27	overflow-x: scroll;
28}
29
30.col-12 {
31  table-layout: fixed;
32}
33

試したこと

.table-responsiveを.containerと.tableのあいだに記述しすれば解決するかと思い、実践。
結果はbody内に収まるわけではなく収まらない分の.tableをスクロールで閲覧が可能となる。
また、モーダルは添付画像の様に途中から見切れてしまい、固定されてしまいます。
こちらにつきましては、bodyのwidth分しか表示されていないことが原因のように受け取ります。

他にはbodyにクラスをつけて半ば強引にwidthを調整しました。

scss
1.history {
2  width: fit-content;
3}

結果はスマホ画面の幅ではなく、PC画面サイズでの表示になる為モーダルも右隅が入りきらない状況です。
惜しいといえば惜しいのですが、スマホ画面に対応という観点では少々方向性が違う気がしています。

大変恐れ入りますが、お力をお貸しいただけますようお願い致します。

補足情報（FW/ツールのバージョンなど）

Bootstrap 4.1.1
rails 5.2.3
ruby 2.6.3
cloud9

m.ts10806

2020/05/05 06:42

レイアウトのみであればRubyに依存しないものとは思います。ブラウザに表示されたHTMLをご提示ください。

koh-s

2020/05/05 07:11

お忙しい中お返事いただきまして誠にありがとうございます。ブラウザ表示のHTMLですが、追加補足にて記載させていただきました。お手数をおかけして申し訳ございませんが、ご確認いただけますようお願い致します。

m.ts10806

2020/05/05 07:15

質問内に入りませんでしたか？いっそのことRailsのコード無くても良いかもしれません。（任せますが、コードは現象が再現する最小構成で構わないと思います）

行動規範の内容に同意します

回答2件

単純な話、物理的に横幅に文字が収まらないはずです。

仮に「日付」「曜日」など<th>が1文字だとして、余白が1文字ぶんだとします。

<th>1つの横幅は3em = 16px * 3 = 48px。 <th>は10項目あるので、48 * 10 = 480px。これが<table>の横幅の最低値です。

iPhone Xの横幅が375pxなので、480pxの要素は収まりません。
文字サイズや余白を調整すれば入るかも..と思うかもしれませんが、項目名が縦1列になるので見づらいはずです。

そのため自分なら以下の2つの方法をとります。

[1] テーブル部分だけスクロールさせるようにする

HTML
1<!-- tableの親要素に追加 -->
2<div class="table-area">
3  <table class="table">
4    ...
5  </table>
6</div>

CSS
1.table-area {
2  overflow: auto;
3}

[2] レスポンシブ対応を行う
今回は、rowspanを使うと一気にやりにくくなるので今回は現実的ではないですが、
現在のテーブルの縦横を入れ替える、という方法をよく使います。

CSS
1table,
2thead,
3tbody,
4tfoot,
5tr,
6th,
7td {
8  display: block; /* とりあえず全部blockにする */
9}
10table {
11  display: flex;
12}
13th,
14td {
15  /* thとtdの高さを揃える。複数行になると破綻 */
16}

また、そうなることが最初からわかっていれば<div>とdisplay: flex;で作成したりするほうが楽なので、いまからだと大変な気がします。

投稿2020/05/05 07:34

編集2020/05/05 07:44

new1ro

総合スコア4528

追加補足

html
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <title>履歴 | My Log</title>
6    <meta name="csrf-param" content="authenticity_token" />
7<meta name="csrf-token" content="IKu/hmNodnov8XmemWxeDmbKthTbEIviKQIm8+Koh4RCk3Jwr6TZz85MlaZw1XJXIK69l/SUwDHSYRLQXGuttQ==" />
8    
9    <meta name="viewport" content="width=device-width,initial-scale=1">
10
11    <link rel="stylesheet" media="all" href="/assets/application.self-1e7313c531b2eb188d3455b026b197e7ef5e954e80b1fc853e2b0d76e304bef4.css?body=1" data-turbolinks-track="reload" />
12    <script src="/assets/rails-ujs.self-43e81c501e7e36871a34b4b950451cc7cb047af4e846ec742539e64724582452.js?body=1" data-turbolinks-track="reload"></script>
13<script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1" data-turbolinks-track="reload"></script>
14<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" data-turbolinks-track="reload"></script>
15<script src="/assets/articles.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
16<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script>
17<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script>
18<script src="/assets/healths.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
19<script src="/assets/homes.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
20<script src="/assets/profiles.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
21<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
22<script src="/assets/jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1" data-turbolinks-track="reload"></script>
23<script src="/assets/popper.self-55bd1408b0e4ff3edf21524b78fbe2266615c8015ce0e5f0828089b1de27d63c.js?body=1" data-turbolinks-track="reload"></script>
24<script src="/assets/bootstrap/util.self-32c933709f03802cab6990dadb15257dcca78c60790311303e1f69319bb5ec09.js?body=1" data-turbolinks-track="reload"></script>
25<script src="/assets/bootstrap/scrollspy.self-9c4010d9389b7b27e3247fcbb0cc4425f15d7df2d0d3464b9c3a9022632f1dc8.js?body=1" data-turbolinks-track="reload"></script>
26<script src="/assets/bootstrap/collapse.self-f40766e711b829f346a1d3f6ca132348a77eef7cdfd28732ba8afcf2c996dc89.js?body=1" data-turbolinks-track="reload"></script>
27<script src="/assets/bootstrap/alert.self-6174a81cd2fbcf8bc9949957661638e9716cb0390e0fcf29fafcdc0f2351c58f.js?body=1" data-turbolinks-track="reload"></script>
28<script src="/assets/bootstrap/tooltip.self-b2c5fc72d4e22d1516e9713d3ee1ffa6f92ed11722175e2a9b88c3acbe0bbc09.js?body=1" data-turbolinks-track="reload"></script>
29<script src="/assets/bootstrap/popover.self-3d5b251608f27dbdae33a816e4736ae6e8a8e1729af1fc0c10eb234bf0f494c5.js?body=1" data-turbolinks-track="reload"></script>
30<script src="/assets/bootstrap/dropdown.self-7abc7d81497e5228d193f1151e74cd9f683732d7ab3e9654f714a4d75fbd41c0.js?body=1" data-turbolinks-track="reload"></script>
31<script src="/assets/bootstrap/button.self-5e0c9bfb00dc1db87237215c889765533d8b0744d96538915cff2ac0e29a3825.js?body=1" data-turbolinks-track="reload"></script>
32<script src="/assets/bootstrap/modal.self-711cfe854709180e4c826346dd982c6df3eabc0eab949d2a1560201a139dccfa.js?body=1" data-turbolinks-track="reload"></script>
33<script src="/assets/bootstrap/carousel.self-684b442295b055f9cdba73cb596ffdb733024661042cfaee5637c28350efdd28.js?body=1" data-turbolinks-track="reload"></script>
34<script src="/assets/bootstrap/tab.self-f8f47356299f63d5a6828b6954f5e92bf82d85370f16410b5ae89d3e1effdd96.js?body=1" data-turbolinks-track="reload"></script>
35<script src="/assets/bootstrap-sprockets.self-636159b35205da4142a43bc02d2849d77d3ac07a0946211585cde15a9c6ff21f.js?body=1" data-turbolinks-track="reload"></script>
36<script src="/assets/chartkick.self-f46c1b0cd1c1416287370a921db044cb589c7d681ab888291e08d1a26921db10.js?body=1" data-turbolinks-track="reload"></script>
37<script src="/assets/Chart.bundle.self-ed6137ff435e8d1182fbaed54f869a29748bf1cbbe26256f1015415448c2ac5e.js?body=1" data-turbolinks-track="reload"></script>
38<script src="/assets/application.self-3b674cc21c46e45472226fa37e9cfbc2f81937ec21008808e57f966ffd5883b9.js?body=1" data-turbolinks-track="reload"></script>
39  </head>
40
41  <body class="history">
42    <header>
43  <div class='fixed-top'>
44    <nav class="navbar navbar-expand-lg ">
45      <a class="navbar-brand black" href="/">My Log</a>
46      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
47        <span class="navbar-toggler-icon black"></span>
48      </button>
49      <div class="collapse navbar-collapse" id="navbarNavDropdown">
50  
51        <ul class="navbar-nav mr-auto">
52            <li class="nav-item dropdown">
53              <a class="nav-link dropdown-toggle black" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
54                日記
55              </a>
56              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
57                <a class="dropdown-item" href="/articles">日記一覧</a>
58                <a class="dropdown-item" href="/articles/new">日記をつける</a>
59              </div>
60            </li>
61            <li class="nav-item">
62              <a class="nav-link black" href="/users/17">Health一覧</a>
63            </li>
64            <li class="nav-item d-block d-sm-none">
65              <a class="nav-link black" href="/users/17/edit">履歴</a>
66            </li>
67            <li class="nav-item">
68              <a class="nav-link black" href="#">ログイン中：テスト17</a>
69            </li>
70        </ul>
71        
72        <ul class="navbar-nav">
73          <li class="nav-item">
74            <a class="nav-link black" href="/users/edit">アカウント編集</a>
75          </li>
76          <li class="nav-item">
77            <a class="nav-link black" rel="nofollow" data-method="delete" href="/users/sign_out">ログアウト</a>
78          </li>
79        </ul>
80      </div>
81    </nav>
82  </div>
83</header>
84      
85<div class="container">
86  <div class="table-responsive">
87    <div class="w-50"></div>
88    <h1 class="text-center health-top">履歴</h1>
89    
90    <table class="table table-bordered table-condensed table-hover table-striped" id="table-healths">
91      <thead>
92        <tr>
93          <th rowspan="2">日付</th>
94          <th rowspan="2">曜日</th>
95          <th colspan="2">体情報</th>
96          <th colspan="3">睡眠情報</th>
97          <th rowspan="2">水分</th>
98          <th rowspan="2">お通じ</th>
99          <th rowspan="2">編集</th>
100        </tr>
101        <tr>
102          <th>体重</th>
103          <th>体脂肪</th>
104          <th>就寝時間(前日)</th>
105          <th>起床時間</th>
106          <th>睡眠時間</th>
107        </tr>
108      </thead>
109    
110      <tbody>
111          <tr>
112            <!-- 日付 -->
113            <td class='text-black pr-0 pl-0'>05/01</td>
114            <!-- 曜日 -->
115            <td class='text-black'>
116              金
117            </td>
118            <!-- 体重 -->
119            <td>
120                60.4
121                kg
122            </td>
123            <!-- 体脂肪 -->
124            <td>
125                11.0
126                %
127            </td>
128            <!-- 就寝時間 -->
129            <td>
130                21:00
131            </td>
132            <!-- 起床時間 -->
133            <td>
134                09:00
135            </td>
136            <!-- 睡眠時間 -->
137            <td>
138                12.0
139            </td>
140            <!-- 水分 -->
141            <td>
142                摂取あり
143            </td>
144            <!-- お通じ -->
145            <td>
146            </td>
147            <!-- 編集 -->
148            <td>
149              <div>
150                <a class="btn btn-success btn-sm" data-remote="true" href="/users/17/healths/1/edit_day">編集</a>
151              </div>
152            </td>
153          </tr>
154          ・・・・・・・
155　　　　　　・・・・・・
156　　　　　　・・・・・
157　　　　　　・・・・
158      </tbody>
159    </table>
160  </div>
161</div>
162
163<div id="edit_day" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>
164
165  </body>
166</html>
167