前提・実現したいこと
bootstrap4を使用し、を使用し、ビューを整えているところですが、
テーブル要素がうまくブラウザ幅に収まってくれません。。
(Gyazo:ブラウザ幅に合わない動画)
表示しているブラウザ幅に合わせてテーブルを表示させたいのですが、
どうしてもうまくいきません。参考記事や何かヒントなどがございましたら
ご教授をお願いいたします。
該当のソースコード
ruby
1**appliication.html.erb** 2 3 4<!DOCTYPE html> 5<html> 6 <head> 7 <title>Gymnas</title> 8 <%= csrf_meta_tags %> 9 <%= csp_meta_tag %> 10 11 12 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 13 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 14 15 </head> 16 17 <body> 18 <%= yield %> 19 </body> 20</html>
ruby
1**index.htm.erb** 2 3 4 <header> 5 <nav class="navbar navbar-dark bg-dark flex-md-nowrap p-0 shadow"> 6 <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">ユーザー名</a> 7 8 <ul class="navbar-nav px-3"> 9 <li class="nav-item text-nowrap"> 10 <a class="nav-link" href="#">サインアウト</a> 11 </li> 12 </ul> 13 </nav> 14 </header> 15 16__「★問題箇所ここから」__ 17 <div class="row"> 18 <div class="col-2"> 19 <div class="sidebar side-color"> 20 固定するコンテンツ 21 </div> 22 </div> 23 <div class="col-1"> 24 <div class="alt-table-responsive"> 25 <table class="table table-bordered mt-5"> 26 <thead> 27 <tr> 28 <th> </th> 29 <th colspan="2">FX</th> 30 <th colspan="2">PH</th> 31 <th colspan="2">Ri</th> 32 <th colspan="2">Vo</th> 33 <th colspan="2">PB</th> 34 <th colspan="2">HB</th> 35 </tr> 36 </thead> 37 <tbody> 38 <form type="number"> 39 <tr> 40 <th rowspan="2">名前</th> 41 <td><input type="text" name="FX_D_1" value=""> </td> 42 <td rowspan="2" id="score_FX" value=""> </td> 43 <td><input type="text" name="PH_D_1"> </td> 44 <td rowspan="2"> </td> 45 <td><input type="text" name="Ri_D_1"> </td> 46 <td rowspan="2"> </td> 47 <td><input type="text" name="Vo_D_1"> </td> 48 <td rowspan="2"> </td> 49 <td><input type="text" name="PH_D_1"> </td> 50 <td rowspan="2"> </td> 51 <td><input type="text" name="HB_D_1"> </td> 52 <td rowspan="2"> </td> 53 </tr> 54 55 <tr> 56 <td><input type="text" name="FX_E_1" value=""> </td> 57 <td><input type="text" name="PH_E_1"> </td> 58 <td><input type="text" name="Ri_E_1"> </td> 59 <td><input type="text" name="PB_E_1"> </td> 60 <td><input type="text" name="Vo_E_1"> </td> 61 <td><input type="text" name="HB_E_1"> </td> 62 </tr> 63 </form> 64 </tbody> 65 </table> 66 </div> 67 </div> 68 </div> 69__「★問題箇所ここまで」__ 70 71 72
推測
<div class="row"> の記述の中にテーブルがあるため、その幅の中にテーブルが収まってくれると思ったのですが... 説明不足な点がありましたら恐れ入りますがご指摘をお願いいたします。 よろしくお願いします。補足情報(FW/ツールのバージョンなど)
ブラウザ:Chrome
bootstrap:4.1.1
ruby:2.6.5
rails:6.0.0
あなたの回答
tips
プレビュー